自訂層疊層

在某些情況下，您可能需要更好地控制 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} />
}