每日质量NPM包-classnames
一、classnames
现在到处都追求效率开发,所谓存在即合理,各种各样的开源包/项目火热,也是因为他们大大解决了之前复杂的逻辑.作为榜上前10的热门包:classnames.还真需要了解了解它才能仗'包'走天涯官方定义: A simple JavaScript utility for conditionally joining classNames together.
理解: 帮助你在React项目更好地使用className
二、使用方法
在认识classnames之前,你可能会有一个疑问: 我发誓我现在react自带的`className`用得挺好的,还需要引入classnames吗?先举个小反例吧
错误
import styles from './style.less'
<div className={styles.div styles.div1}></div> //不允许存在多个变量
正确
import styles from './style.css'
import classNames from 'classnames'
let divClass = classNames({
'div': true,
'div1': true
})
<div className={divClass}></div>
//输出class="div div1"
当然,机智的你当然想到了可以用字符串模板解决
<div className={`${styles.div} ${styles.div1}`}></div>
"干嘛弄这么麻烦?直接import './style.css'
不就行了?"
import from './styles.css'
<div className="div div1></div>
大兄弟所言甚是.上面只是我在项目中使用antd-pro
CSS Modules编码方式
简单介绍一下什么是CSS Modules
:
由于项目开发逐渐庞大过程中,对于样式有两个不得不考虑的问题(这也是CSS Modules
出现的问题)
-
全局污染 —— CSS 文件中的选择器是全局生效的,不同文件中的同名选择器,根据 build 后生成文件中的先后顺序,后面的样式会将前面的覆盖;
-
选择器复杂 —— 为了避免上面的问题,我们在编写样式的时候不得不小心翼翼,类名里会带上限制范围的标识,变得越来越长,多人开发时还很容易导致命名风格混乱,一个元素上使用的选择器个数也可能越来越多。
归根结底就是命名惹的祸
而CSS Module
就是在对className转换的时候加入一定的规则,使得样式名自动添加一个hash值,确保唯一性
// example.less
.title {
}
<div className={styles.title}>CSS Modules</div>;
//转换后 =====>
<div class="title___3TqAx">title</div>
以上就是CSS Modules
的基本原理.更多用法可以参考:《Ant Design Pro - 样式》
当然说那么多,也是想证明一下classnames
的优秀
classnames语法
``` //基础用法 classNames('foo', 'bar'); // => 'foo bar' classNames('foo', { bar: true }); // => 'foo bar' classNames({ 'foo-bar': true }); // => 'foo-bar' classNames({ 'foo-bar': false }); // => '' classNames({ foo: true }, { bar: true }); // => 'foo bar' classNames({ foo: true, bar: true }); // => 'foo bar'// 各种各样属性结合
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'
// 一些不存在/空的属性会自动忽略
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'
//数组会遍历输出
var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'
//字符串模板方式
let buttonType = 'primary';
classNames({ [btn-${buttonType}
]: true });
通过状态控制样式的<b>添加删除</b>,简直不要太方便.从此告别`removeClass`之类方法
<h4>结合React用法</h4>
动态控制按钮样式
constructor(arg){
super(arg)
this.state = {
isPressed: false,
isHovered: true
}
}
render(){
var btnClass = classNames({
btn: true,
'btn-pressed': this.state.isPressed,
'btn-over': !this.state.isPressed && this.state.isHovered
});
return(
<div>
<button className={btnClass}>按钮</button>
</div>
)
}
// 输出====>
<h4>结合`CSS Modules`用法</h4>
CSS Modules介绍:<a href="https://github.com/css-modules/css-modules" target="_blank">《css-modules》</a>
import classNames from 'classnames/bind';
let styles = {
key1: 'div',
key2: 'div1',
key3: 'div2'
};
let cssModulesClass = classNames.bind(styles);
let divClassName = cssModulesClass('key1', ['key2']);
// => "div div1" ```更多用法可以参考:《npm-classnames》
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· Ollama——大语言模型本地部署的极速利器
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· Windows编程----内核对象竟然如此简单?
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用