react className变量使用方式
- 前端
- 三生万物
- 0
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>
<div>航班</div>
<div>关注</div>
</div>
从上可以看出 index.module.scss 里的样式，会被处理成一个一维 json 对象，然后通过层级组合添加到 class 里，从而实现最终样式效果，而且样式不会冲突，这个类似于 vue 的 scoped
附注：className多个值
<div className={`${styles.foo} ${styles.bar}`}></div>
免责申明：本站发布的内容（图片、视频和文字）以转载和分享为主，文章观点不代表本站立场，如涉及侵权请联系站长邮箱：xbc-online@qq.com进行反馈，一经查实，将立刻删除涉嫌侵权内容。
