react前端css样式类神器—

安装

yarn add classnames -s
// 或者
npm install classnames -s

使用

// 引入
import cs from "classnames"

1. 传入一个对象<div className={cs({cs1: true, cs2: false})}></div>
2. 直接接受多个类名<div className={cs(true && cs1, false && cs2)}></div>

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'// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

react前端css样式类神器——classnames库相关推荐

【前端】3.总结一下前端css样式规范
总结一下前端css样式规范前端样式CSS 规范分类的命名方法统一语义理解和命名模块(.m-).元件(.u-) 功能(.f-) 皮肤(.s-) 状态(.z-) sass 规范当前选择器的样式属 ...
小高不太行之前端——CSS样式 I
小高不太行之前端--CSS样式(基础)上提示:下篇马上问世,在赶了在赶了提示: 文章目录小高不太行之前端--CSS样式(基础)上前言一.基础知识 (一)插入方法[外部/内部/内联] 1.外部 ...
外链式样式表_WEB前端 CSS样式表
CSS层叠样式表字体样式属性 font-size:字号大小页中普遍使用14px+. 尽量使用偶数的数字字号.ie6等老式浏览器支持奇数会有bug. font-family:字体中文字体需要加引号 ...
前端-CSS样式的简单介绍
CSS CSS的作用是调整HTML标签的样式,美化网页的界面 CSS的结构每个CSS都由两个部分组成,分别是选择器与属性选择器用于选择要修改样式的标签属性是标签内要具体修改的内容 p {colo ...
React中CSS样式
文章目录一.内联样式在内联样式中使用State 二.外部样式表三.CSS Module 使用方式一.内联样式在React中可以直接通过标签的style属性来为元素设置样式.style属性需要 ...
react的css样式
1.使用React的行内样式设置样式 (1)在JSX文件中定义样式变量,和定义普通的对象变量一样 let backAndTextColor = {backgroundColor:'blue',colo ...
react 改变css样式_react怎么更改css样式
React点击/hover修改CSS样式 (1)点击修改样式方法一:(typescript写法)type state = { selected: boolean; }; class Measurem ...
前端css样式如何设置内边框
背景:我在写鼠标悬停样式 .topbox .menuBox > ul > li:hover { border-bottom: 4px solid #3C7CFC; font-weight: ...
react中css样式表无效
今天在一个新的项目中写页面,遇到了一个css样式无效的问题,问题如下上图这样写类名无效(已经import过样式文件) 需要像下图这样使用才可以后来经过查阅发现应该是新项目开启了CSS Module ...

react前端css样式类神器——classnames库

安装

使用

react前端css样式类神器——classnames库相关推荐

最新文章

热门文章