Source:  Twitter logo

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}>

the style file is

    display block
    width 100%

    display flex
    align-items center

        width 120px
        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?

A lot has changed since this question was asked. Create React App has for a while (since react-scripts@2.0.0) supported css modules and scss out of the box without ejecting.

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

7 users liked answer #0dislike answer #07
the_cheff profile pic

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')}/>
1 users liked answer #1dislike answer #11
Umesh profile pic

support for CSS Modules has been long in the making for create-react-app, it should be in the 2.0 beta (

1 users liked answer #2dislike answer #21
Mario F profile pic
Mario F

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).