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:

自定义层叠层级

在某些情况下，你可能需要对 Nextra 预定义的 CSS 进行更多控制，以避免层叠层中样式的意外覆盖。以下是一个示例，展示了 nextra-theme-docs 如何使用 postcss-import 将预定义的 CSS 放入指定的层叠层中：

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`)
  }
}

安装 `postcss-import`

安装 postcss-import 并将其添加到 postcss.config.mjs 中：

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 */
}

设置层叠层级

在你的 CSS 文件（例如 styles.css）中，导入 nextra-docs-theme CSS 并指定层级：

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
}

导入你的 CSS 文件

在应用程序的顶层布局（例如 app/layout.jsx）中导入你的 CSS 文件以应用样式。