隔离反应中每种成分的css

我在create-react-app上构建我的react应用程序.我希望每个组件都有本地css.我正在计划使用css模块但这些都是问题

如果我使用css模块

我将不得不运行eject命令

我可以使用css模块和scss文件.我像这样在scss中嵌套

这是我的scss文件之一

$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.*

另外,如果我不想使用css模块,有什么办法吗？在其中一个项目中,我看到有人像这样隔离了css

import c from './Reviews.styl'


                
                
            

样式文件是

: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

使用styl文件而不是css.我喜欢这种方式,因为在这里不需要在所有子div中使用style.classname.我怎样才能做到这一点？