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