[v3] add documentation for customize the cascade layers

docs/pages/docs/guide/advanced/customize-the-cascade-layers.mdx

@@ -0,0 +1,67 @@
+import { Steps } from 'nextra/components'
+
+# Customize the Cascade Layers
+
+In some scenarios, you may need more control over the Nextra predefined CSS to
+avoid unintended overrides of styles within cascade layers. Below is an example
+of how `nextra-theme-docs` uses
+[postcss-import](https://github.com/postcss/postcss-import) to place predefined
+CSS into a specified cascade layer:
+
+<Steps>
+
+### Install `postcss-import`
+
+Install `postcss-import` and add it to `postcss.config.js`:
+
+```js filename="postcss.config.js"
+module.exports = {
+  plugins: {
+    'postcss-import': {}
+    // ...
+  }
+}
+```
+
+### Disable Automatic Import of the Nextra Official Theme CSS
+
+Nextra by default automatically imports the official theme CSS. You can disable
+this behavior by setting `autoImportThemeStyle: false` in the Nextra
+configuration.
+
+```js filename="next.config.js"
+const withNextra = nextra({
+  autoImportThemeStyle: false,
+  theme: 'nextra-theme-docs'
+  // ...
+})
+```
+
+### Set Up the Cascade Layers
+
+In your CSS file (e.g. `styles.css`), import the `nextra-docs-theme` CSS and
+specify the layers:
+
+```css filename="styles.css"
+@layer nextra, my-base;
+
+@import 'nextra-theme-docs/dist/style.css' layer(nextra);
+
+@layer my-base {
+  /* my base styles */
+}
+```
+
+### Import Your CSS File
+
+Create a `pages/_app.jsx` file and import your CSS files there:
+
+```jsx filename="pages/_app.jsx"
+import '../path/to/your/styles.css'
+
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
+
+</Steps>