如何使用classnames模块库为react动态添加class类样式

Posted blueberrycode

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用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,为了更好的展示本例,在setSatte时取!state实现点击循环渲染字体颜色的方式。

App.js代码

import React, { useState } from ‘react‘
import ‘./App.less‘
import classnames from ‘classnames‘

const App = () => {
    const [clickStatus,setClickStatus] = useState(false);

    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模块库,可以简单快捷的去实现动态增减样式。

 

以上是关于如何使用classnames模块库为react动态添加class类样式的主要内容,如果未能解决你的问题,请参考以下文章

react动态添加样式:style和className

react动态设置ClassName

在反应中使用css模块如何将className作为道具传递给组件

根据状态动态更新 className 样式

在我的 React 组件中使用 CSS 模块时 CSS className 没有反映

具有 CSS 模块和 React 的多个类名