import { Steps } from 'nextra/components'

# 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](https://github.com/postcss/postcss-import) to place predefined
CSS into a specified cascade layer:

<Steps>

## Install `postcss-import`

Install `postcss-import` and add it to `postcss.config.js`:

```js filename="postcss.config.js"
module.exports = {
  plugins: {
    'postcss-import': {}
    // ...
  }
}
```

## Disable Automatic Import of the Nextra Official Theme CSS

Nextra by default automatically imports the official theme CSS. You can disable
this behavior by setting `autoImportThemeStyle: false` in the Nextra
configuration.

```js filename="next.config.js"
const withNextra = nextra({
  autoImportThemeStyle: false,
  theme: 'nextra-theme-docs'
  // ...
})
```

## Set Up the Cascade Layers

In your CSS file (e.g. `styles.css`), import the `nextra-docs-theme` CSS and
specify the layers:

```css filename="styles.css"
@layer nextra, my-base;

@import 'nextra-theme-docs/dist/style.css' layer(nextra);

@layer my-base {
  /* my base styles */
}
```

## Import Your CSS File

Create a `pages/_app.jsx` file and import your CSS files there:

```jsx filename="pages/_app.jsx"
import '../path/to/your/styles.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
```

</Steps>
