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>

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