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

这种命名规范主要是避免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>

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

发布于 2021-01-20 12:30

Sass

CSS 布局

CSS

react className变量使用方式

文章被以下专栏收录

前端开发