这种命名规范主要是避免 class 作用域相互影响,在新版的 React 中命名为 xxx.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;
.select {
display: flex;
width: 148px;
height: 26px;
border: 1px solid #ffffff;
border-radius: 4px;
.active {
color: #ac1d1d;
background-color: #ffffff;
}
}
.select_item {
font-family: PingFangSC-Regular, PingFang SC;
font-size: 13px;
font-weight: 400;
display: flex;
overflow: hidden;
align-items: center;
flex: 1;
justify-content: center;
color: #ffffff;
}color: #ffffff;
}
declare module '*.module.scss' {
export const style: any
}
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
一级的方式使用
{
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
<div className={`${styles.foo} ${styles.bar}`}></div>
import classnames from 'classnames';
<div className={classnames('hero hero--primary', styles.heroBanner)}></div>
import clsx from 'clsx';
<div className={clsx('hero hero--primary', styles.heroBanner)}></div>
下一篇: Ubuntu 命令方式安装中文语言包