react js中每个组件的css隔离答案

【问题标题】：Isolation of css for each component in react jsreact js中每个组件的css隔离
【发布时间】：2018-01-22 09:39:04
【问题描述】：

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

如果我使用 css 模块

我将不得不运行弹出命令
我可以将 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'

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

样式文件是

: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。我怎样才能做到这一点？

【问题讨论】：

标签： css reactjs sass create-react-app stylus

【解决方案1】：

自从提出这个问题以来，发生了很多变化。 Create React App 有一段时间（从 react-scripts@2.0.0 开始）支持 css 模块 和 scss 开箱即用而不弹出。

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

您所要做的就是将任何文件从 somestyle.css 重命名为 somestyle.module.css，它现在将表现为一个 css 模块。

您可以通过将 someStyle.scss 重命名为 somestyle.module.scss 以同样的方式使用 scss

【讨论】：

【解决方案2】：

我建议使用classnames。它是一个库，您可以通过它从 css 文件将 css 导入到您的组件中，然后像下面这样使用它：

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


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

【讨论】：

这和我问的有什么关系？
对不起，我已经修改了我的答案并包含了一个例子
但这真的是本地化吗？在这里，我还必须在所有 div 中使用 {cx('classname')}。我的问题的最后一部分怎么样？
看看我所做的编辑。我也添加了样式文件。

【解决方案3】：

create-react-app 对 CSS 模块的支持已经很久了，它应该是 2.0 beta (https://github.com/facebookincubator/create-react-app/issues/3815)

【讨论】：

那么，弹出是唯一的选择。