从npm官网来看,目前classnames的下载量越三百多万,styled-components下载量约一百多万。使用人数都是很多的,各有个的优缺点,以自己的代码习惯来选择吧。
一、classnames使用
官网对classnames的解释是:A simple JavaScript utility for conditionally joining classNames together.(将属性的名字连接在一起的javaScript库)。
它可以轻易在react里面设置多个class名,并且可以通过布尔值来控制对应的class名是否使用。
详情见:npm官网对classname的描述
1、安装classnames
npm i classnames --save
2、引用
import classNames from "classnames"
3、在css文件里面写样式
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.bkg {
background: #ccc;
}
4、使用,在你要应用样式的标签上写className
// 1、用classnames应用 一个样式写法
className={classNames("App-header")}
// 2、用classnames同时 应用两个样式的写法
className={classNames("App-header","bkg"}
// 3、选择性应用样式写法
// 注:以下的true可以写变量值,如this.state.flag
className={classNames("App-header",{"bkg":true})}
二、styled-components
它的主要思想是通过为 css 生成随机的类名称的方式来建立一种局部类命名的方式。它能解决 CSS 全局作用域的问题,而且移除了样式和组件间的映射关系。
- 用 css 的语法写 css
- 能创建局部 className
- 支持 preprocessor 和 postprocessor
更多详情见此链接:用 styled-components 在 react 中编写 css
(以分离的模式示例)
1、安装
npm i styled-components --save
2、引入
import Styled from 'styled-components'
3、自定义样式
const Div = Styled.div`
font-weight:bold;
`
const Ul = Styled.ul`
list-style:none;
li{
color:red;
}
`
const Button = Styled.button`
color:blue;
`
const RadiusButton = Styled( Button)` //重朔组件 效果是它可以继承上边那个Button的样式
border-radius:50%;
`
4、使用样式
export default class componentName extends Component {
constructor(props){
super(props);
this.state = {
list:['aa','bb','cc']
}
}
render() {
return (
<Div>
one Component
<Ul>
{
this.state.list.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</Ul>
<Button>按钮</Button>
<RadiusButton>按钮</RadiusButton>
</Div>
)
}
}
先写到这里吧,以后再来补充。