自定义层叠层

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

安装 `postcss-import`

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

postcss.config.mjs


export default {
  plugins: {
    'postcss-import': {}
    // ... your other PostCSS plugins (e.g., `autoprefixer`, `cssnano`)
  }
}

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

styles.css


@layer nextra, my-base;
 
@import 'nextra-theme-docs/dist/style.css' layer(nextra);
 
@layer my-base {
  /* my base styles */
}

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

app/layout.jsx


import '../path/to/your/styles.css'
 
export default async function RootLayout({ children }) {
  // ... Your layout logic here
}