Search code examples
javascriptcssnext.jsweb-component

How to apply dependant styles to a CSS Component in Next.js?

Recently, I've created a CSS Component in Next.js for my header object.

Though in this example, I will use a simplier case from Next.js' documentation.

Imagine this is my button.js:

import styles from './Button.module.css'

export function Button() {
return (
    <button
      type="button"
      // Note how the "error" class is accessed as a property on the imported
      // `styles` object.
      className={styles.error}
    >
    Destroy
    </button>
  )
}

And this is my ./button.module.css:

.error {
    color: white;
    background-color: red;
}

.error.glow {
    box-shadow: 0 0 16px red;
}

Later in the page, I will modify the DOM to apply the class 'glow' (so it should match .error.glow' to the error button object. Though what happens in this case, is that the class gets applied and the CSS does not.

I've tried searching for an answer on importing dependant CSS on Stackoverflow, youtube and the official documentation, please suggest any way in which I could fix this problem or whether it is possible.

I've also tried importing the styles manually in the component by adding styles.glow but that would automatically apply the styles even before I would assign the .glow class.

Many thanks.

Solution

  • So after using Next for some time, practically the only way to apply dependent styles is through the use of returned JSX Styling.

    Here's an example of what worked for me: enter image description here

    That will ship your written CSS directly with the element, so there's no need to worry about dependent styling.