问题需求,我需要在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>
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5CNzQjM1Q2NlhTM3cDN1MDMzYzX1MzMwgTMyIzLchDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
参考文献: