自定义级联层

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

安装 `postcss-import`

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

postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {}
    // ...
  }
}

Nextra 默认会自动导入官方主题 CSS。您可以通过在 Nextra 配置中设置 autoImportThemeStyle: false 来禁用此行为。

next.config.js

const withNextra = nextra({
  autoImportThemeStyle: false,
  theme: 'nextra-theme-docs'
  // ...
})

在您的 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 */
}

创建一个 pages/_app.jsx 文件并在其中导入您的 CSS 文件。

pages/_app.jsx

import '../path/to/your/styles.css'
 
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}