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  to place predefined
CSS into a specified cascade layer:
Install postcss-import
Install postcss-import and add it to postcss.config.mjs:
postcss.config.mjs
export default {
plugins: {
'postcss-import': {}
// ... your other PostCSS plugins (e.g., `autoprefixer`, `cssnano`)
}
}Set Up the Cascade Layers
In your CSS file (e.g. styles.css), import the nextra-docs-theme CSS and
specify the layers:
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
Import your CSS file at the top-level layout of your application (e.g.
app/layout.jsx) to apply the styles.
app/layout.jsx
import '../path/to/your/styles.css'
export default async function RootLayout({ children }) {
// ... Your layout logic here
}Last updated on