【react基础】11、react的样式方案 classnames和styled-components

从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>
    )
  }
}

先写到这里吧，以后再来补充。