0
点赞
收藏
分享

微信扫一扫

React中为className添加多样式名的几种方式


问题需求,我需要在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>

React中为className添加多样式名的几种方式_className

 参考文献:

1、​​样式与 CSS – React​​


3、​​classnames - npm​​ 

举报

相关推荐

0 条评论