问题需求,我需要在jsx中的className中同时引用SCSS文件中的.top .A这两个CSS样式类,如何实现呢?
.top {
width: 250px;
height: 250px;
font-size: 3rem;
z-index: 0;
position: absolute;
}
.top:hover {
box-shadow: 0 0 10px #ccc;
z-index: 999;
}
.A {
top: 100px;
left: 100px;
background: #da110a;
}
解决方法
1、className 利用 ${ }
import CSS from './content.module.scss';
<div className={`${CSS.top} ${CSS.A}`}>A</div>
2、 className传入数组使用join函数分割
import CSS from './content.module.scss';
<div className={[CSS.top,CSS.A].join(' ')}>A</div>
3、使用第三方插件classNames
安装插件
npm install classnames
使用时
import classNames from 'classnames';
import CSS from './content.module.scss';
<div className={classNames(CSS.top,CSS.C)}>A</div>
参考文献:
1、样式与 CSS – React
3、classnames - npm