Isolation of css for each component in react js

Question

I building my react application over create-react-app. I want to have local css for each of my component. I was planning use css modules But these are the issues

If I use css modules

• I will have to run the eject command
• Can I use css modules along with scss files. I have nesting in scss like this

This is one of my scss file

$scalel: 1.7vmin;
.navbar-side {
  position: absolute;
  background: rgba(255,255,255,0.15);
  width: 17 * $scalel;
  top: 6.2 * $scalel;
  padding-bottom: 2 * $scalel;
  .tessact-logo {
    width: 50%;
    height: 12 * $scalel;
    background: url('/public/images/logo.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin-left: 25%;
  }
  .navbar-item {
    padding: 0.8 * $scalel;
    transition: all 0.2s ease;
    cursor: pointer;
    padding-left: 3 * $scalel;
    &:hover {
      background: rgba(255,255,255,0.15);
    }
    &.active {
      background: rgba(255,255,255,0.25);
    }
    .navbar-item-inside {
      display: none;
    }
  }
}

*How can use classname={style.navbar-item}? key is navbar-item is in nest.*

Also if I don't want to use css modules, is there any way? In one of the projects I have seen someone isolating the css like this

import c from './Reviews.styl'

<div className={c.container}>
                <ReviewSearch
                    assignIsOpen={this.state.assignIsOpen}
                    toggleAssign={this.toggleAssign}
                    selectedRows={this.props.selectedRows}
                    onSubmitProcess={this.onSubmitProcess}/>
                <ReviewTable
                    isLoading={this.props.isLoading}
                    items={this.props.list}
                    selectedRows={this.props.selectedRows}
                    onRowSelection={this.onRowSelection}
                    authToken={this.props.auth_token}
                    setCurrentItem={this.setCurrentItem}/>
            </div>

the style file is

:local(.container)
    display block
    width 100%

.control-container
    display flex
    align-items center

    .control-label
        width 120px
    .control
        flex 1

    & + .control-container
        margin-top 30px

that used styl file instead of css. I like this way because in this there is no need to use style.classname in all the child divs. How can I achieve this?

Answer 1

A lot has changed since this question was asked. Create React App has for a while (since [email protected]) supported css modules and scss out of the box without ejecting.

https://create-react-app.dev/docs/adding-a-css-modules-stylesheet

All you have to do is to rename any file from somestyle.css to somestyle.module.css and it will now behave as a css module.

You can use scss the same way by renaming someStyle.scss to somestyle.module.scss

Answer 2

support for CSS Modules has been long in the making for create-react-app, it should be in the 2.0 beta (https://github.com/facebookincubator/create-react-app/issues/3815)

Answer 3

I would suggest to use classnames. It is a library by which you can import css into your component from css file and then use it like below:

import styles from './your.css'
import cn from 'classnames/bind'
const cx  = cn.bind(styles)


<div className={cx('myDiv')}/>