カスケードレイヤーのカスタマイズ

カスケードレイヤー内で意図しないスタイルの上書きを避けるため、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} />
}