Skip to Content
Nextra 4.0 is released. Read more
DocumentationAdvancedCustomize Cascade Layers

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 function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}
Last updated on
PlaygroundTwoslash Support