关于SegmentFault:react-className变量使用方式

index.module.scss

.select {
  display: flex;
  width: 148px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid #ffffff;
  .active {
    background-color: #ffffff;
    color: #ac1d1d;
  }
}
.select_item {
  flex: 1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
}

[success] 这种命名标准次要是防止 class 作用域相互影响，在新版的 React 中命名为 xxx.module.scss 主动开启。

在 typescript 里是这样的

declare module '*.module.scss' {export const style: any}

index.js

import styles from './index.module.scss'

class Demo extends Component {
   return (<div className={styles.select}>
        <div className={`${styles.select_item} ${styles.active}`}> 航班 </div>
        <div className={styles.select_item}> 关注 </div>
      </div>
    )
}

所有 class 间接通过 styles.xxx 一级的形式应用

styles 变量打印内容如下：

{
  active: "airList_active__G9PFh",
  select: "airList_select__1T2lI",
  select_item: "airList_select_item__1_MHW"
}

最终在浏览器里的组合后果：

<div class="airList_select__1T2lI">
  <div class="airList_select_item__1_MHW airList_active__G9PFh"> 航班 </div>
  <div class="airList_select_item__1_MHW"> 关注 </div>
</div>

从上能够看出 index.module.scss 里的款式，会被解决成一个一维 json 对象，而后通过层级组合增加到 class 里，从而实现最终款式成果，而且款式不会抵触，这个相似于 vue 的 scoped

附注：className 多个值

<div className={`${styles.foo} ${styles.bar}`}></div>

欢送关注：技术开发分享录