CODEWITHSUNDEEP
csssassnext.jscss-selectorscss-modules
Felipe César
Felipe César

Reputation: 1444

How to make composed class names styles with SASS and CSS modules

I have a Next.js project and I'm studying using SCSS/SASS for styling. I'm trying to figure out the best way to simplify the class name styling.

So right now I'm having the following problem:

I have a component like:

import styles from './component.module.scss';

const Component = () => {
  return (
    <div className={styles.container}>
      <div className='content'>
        ...
      </div>
    </div>
  );
}

I would like to make a simple .scss like:

.container {
  background-color: red;

  .content {
    background-color: blue;
  }


}

The class .container works well. But to be able to apply .content I would have to change the 2nd div's classname to {styles.content} instead of just content.

Is there a way to use styles.CLASS only in the top div of the component and not have to use it for every children's div?

Upvotes: 0

Views: 3464

Answers (1)

zvijude
zvijude

Reputation: 359

You can Add a Global Stylesheet to app.js, and use it like that everywhere:

<div className='content'> ... </div>

or a module Stylesheet, and use it like that, only in files you imported it

import styles from './component.module.scss';

    <div className={styles.container}> ... </div>

if you want it like that:

 <div className={styles.container}>
      <div className='content'>
        ...
      </div>
 </div>

you need to create 2 Stylesheets

  1. a module Stylesheet and import it to a specific file
  2. a global Stylesheet and import it to app.js

Upvotes: 1

Related Questions