如何使⽤classnames模块库为react动态添加class类样式
摘要
  在react中添加动态的css时，传统的⽅式较为繁琐，今天刚好学习到⼀个模块库可以便捷的解决这个问题。对的，它就
是“classnames”。
classnames模块库
npm安装
npm install classnames --save
Usage with React.js
  classnames函数接受任意数量的class参数，这些class参数可以是字符串或对象，class参数同给定true || false来动态的增减class样式。下⾯展⽰⼀个简单的动态点击class的类样式来解释classnames的基本⽤法。利⽤React hooks快速的渲染点击事件的state，为了更好的展⽰本例，在setState时取！state实现点击循环渲染字体颜⾊的⽅式。
App.js代码
import React, { useState } from 'react'
import './App.less'
import classnames from 'classnames'
const App = () => {
const [clickStatus,setClickStatus] = useState(false);react面试题hooks
const boxClick = () =>{
setClickStatus(!clickStatus);
};
return (
<div className='box'>
<div
className={classnames({
'box-content': true,
'box-content-color': clickStatus,
})}
onClick={boxClick}
>
Hello,Jack!
</div>
</div>
);
}
export default App;
App.less代码
/*{App组件less样式}*/
.box {
width: 100vw;
height: 30vh;
.unity();
flex-direction: column;
}
/*{通⼀less样式}*/
.
unity{
display: flex;
justify-content: center;
align-items: center;
}
/*content-静态样式*/
.box-content{
background: #33a579;
margin-top: 20px;
color: black;
font-size: 3vmin;
font-weight: 700;
border-radius: 1vmin;
cursor: default;
}
/*content-动态样式*/
.box-content-color{
color: gold;
}
测试结果
总结
  分享在实际项⽬中⼀个很实⽤的classnames模块库，可以简单快捷的去实现动态增减样式。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。