一、React中CSS的概述

1. 组件化天下的CSS

整个前端已经是组件化的天下
- 而CSS的设计就不是为了组件化而生的，所以目前组件化的框架中都需要一种合适的CSS解决方案
在组件化中选择合适的CSS解决方案应该符合以下条件
- 可以编写局部css：css具备自己的局部作用域，不会随意污染其它组件内的元素
- 可以编写动态的css：可以获取当前组件的一些状态，根据状态的变化生成不同的css样式
- 支持所有的css特性：伪类、动画、媒体查询等
- 编写起来简洁方便、最好符合一贯的css风格特点
- 等

2. React中的CSS

事实上，css一直是react的痛点
Vue在这点做的好于react
- Vue通过在 .vue 文件中编写 <style><style/> 标签来别写自己的样式
- 通过是否添加 scoped 属性来决定编写的样式是全局有效还是局部有效
- 通过lang属性来设置喜欢的less、sass等预处理器
- 通过内联样式风格的方式来根据最新状态设置和改变css
- 等
相比而言，react官方并没有给出react中统一风格的css
- 由此，从普通的css、到css modules，再到css in js，有几十种不同的解决方案，上百个不同的库
- 目前仍未能统一方案

二、内联样式CSS写法

内联样式

内联样式是官方推荐的一种css样式的写法
- style接受一个采用小驼峰命名属性的JavaScript对象，而不是CSS字符串
- 并且可以引入state中的状态来设置相关的样式
内联样式的优点
- 样式之间不会有冲突
- 可以动态获取当前state中的状态
内联样式的缺点
- 写法上都需要使用驼峰标识
- 某些样式没有提示
- 大量的样式代码造成混乱
- 某些样式无法编写(如伪类/伪元素)
官方希望内联和普通的css来结合使用

三、普通CSS文件写法

普通的CSS

普通的css通常会编写到一个单独的文件，之后再进行引入
这样编写的方式和普通网页开发编写的方式一样
- 组件化开发中我们希望组件是一个独立的模块，即便是样式也只是在自己内部生效，不会互相影响
- 但是普通的css都属于全局的css，样式之间会相互影响
这种编写方式最大的问题是样式之间会相互层叠掉

四、CSS Module写法

css module

css module并不是react特有的解决方案，而是所有使用到类似webpack配置的环境下都可以使用
- 如果在其他项目中使用，需要自己进行配置，如配置webpack.config.js中的modules:true
react脚手架已经内置了css modules的配置
- .css/.less/.scss等样式文件都需要修改为 .module.css/.module.less/.module.scss等
- 之后就可以引入并使用
css modules 确实解决了局部作用域的问题，也是很多人喜欢在react中使用的一种方案
缺陷
- 引用类名，不能使用连接符(.app-title)，在JavaScript中是不识别的
- 所有的className都必须使用{style.className}的形式来编写
- 不方便动态来修改某些样式，依然需要使用内联样式的方式

// style.module.css
.title {
    color: skyblue;
}

export class StyledCom extends PureComponent {
  render() {
    return (
      <div>
        <h2 className={style.title}>StyledCom</h2>
      </div>
    )
  }
}

五、CSS in JS 解决方案

1. 认识 CSS in JS

官方文档提到过
- CSS in JS 是一种模式，其中CSS由JavaScript生成而不是在外部文件中定义
- 此功能并不是react的一部分，而是第三方库提供
- react对样式如何定义并没有明确态度
传统前端开发中，通常会将结构(HTML)、样式(CSS)、逻辑(JavaScript)进行分离
- 但React的思想认为逻辑本身和UI是无法分离的，所以才会有了JSX语法
- 样式也是属于UI的一部分
- 事实上CSS in JS 的模式就是一种将样式(CSS)也写入到JavaScript中的方式，并且可以方便的使用JavaScript的状态
- React又称为 All in JS
当然，也收到很多批评
- Stop using CSS in JavaScript for web development

2. 认识 styled-components

批评声音虽然有，但还是有很多优秀的CSS in JS的库
- CSS in JS 通过JavaScript来为CSS赋予一些能力，包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修改状态等
- 虽然CSS预处理器也具备某些能力，但获取动态状态依然是一个不好处理等点
- 所以，目前可以说CSS in JS是React编写CSS最为受欢迎的一种解决方案
流行的CSS-in-JS库有哪些
- styled-components
- emotion
- glamorous
目前可以说 styled-components 依然是社区最流行的 CSS in JS 库
安装 styled-components
- npm i styled-components

3. ES6标签模版字符串

ES6中增加了模板字符串的语法
模板字符串还有另外一种用法：标签模板字符串(Tagged Template Literals)
普通JavaScript函数
- 正常情况下，都是通过函数名() 方式来进行调用的，其实函数还有另一种调用方式
在调用时候插入其它变量
- 模板字符串被拆分了
- 第一个元素是数组，是被模板字符串拆分的字符串组合
- 后面的元素是一个个模板字符串传入的内容
在styled-components中，就是通过这种方式来解析模板字符串，最终生成想要的样式的

4. styled的基本使用

styled-components的本质是通过函数的调用，最终创建出的一个组件
- 这个组件会被自动添加上一个不重复的class
- styled-components会给该class添加相关的样式
支持类似CSS预处理器一样的样式嵌套
- 支持直接子代选择器或后代选择器，并且直接编写样式
- 可以通过 & 符号获取当前元素
- 直接伪类选择器、伪元素等

// style.js
import styled from 'styled-components'

export default styled.div`
    .title {
        color: red;
        font-size: 30px;

        &:hover {
            cursor: pointer;
            background-color: skyblue;
        }
    }
    .content {
        font-size: 30px;
        background-color: #f2f2f2;
    }
`

import React, { PureComponent } from 'react'

import style from './style.module.css'
import AooWrapper from './style'

export class StyledCom extends PureComponent {
  render() {
    return (
      <div>
        <h2 className={style.title}>StyledCom</h2>
        <AooWrapper>
          <div className="title">
            title
          </div>
          <div className="content">
            content
          </div>
        </AooWrapper>
      </div>
    )
  }
}

export default StyledCom

5. props、attrs属性

props可以传递

<AppWrapper color="30px"/>

props可以被传递给styled组件
- 获取props需要通过 ${} 传入一个插值函数，props会作为该函数的参数
- 这种方式可以有效的解决动态样式的问题
添加attrs属性

// style.js
import styled from 'styled-components'

export default styled.div.attrs(props => {
    return {
        bgc: props.bgc || 'pink'
    }
})`
    .title {
        color: red;
        font-size: 30px;

        &:hover {
            cursor: pointer;
            background-color: skyblue;
        }
    }
    .content {
        font-size: 30px;
        background-color: ${props => props.bgc};
    }
`

export class StyledCom extends PureComponent {
  constructor() {
    super()
    this.state = {
      bgc: 'tan'
    }
  }
  render() {
    const { bgc } = this.state
    return (
      <div>
        <AooWrapper bgc={bgc}>
          <div className="title">
            title
          </div>
          <div className="content">
            content
          </div>
        </AooWrapper>
      </div>
    )
  }
}

6. styled高级特性

支持样式的继承

// 父
const AButton = style.button`
    padding: 7px 20px;
    border-radius: 7px;
`
// 子
const EButton = style(AButton)`
    background-color: #f2f2f2;
    color: #000;
`

六、classnames库使用

1. Vue中添加class

vue中添加class非常简单
通过传入一个对象

<div class="default" v-bind:class="{ active: isActive, 'color': red }">
</div>

传入一个数组

<div v-bind:class="[ activeClass, errorClass ]">
</div>

甚至是对象和数组混合使用

<div v-bind:class="[ { active: isAvtive }, errorClass ]">
</div>

2. React中添加class

react可以通过一些逻辑来决定是否添加某些class

<div>
    <h2 className={ "title" + ( isActive ? "active" : "" ) }><h2>
    <h2 className={ [ "title", ( isActive ? "active" : "" )].join(" ") }><h2>
</div>

也可以借助第三方库：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'

六、React中如何编写CSS

一、React中CSS的概述

1. 组件化天下的CSS

2. React中的CSS

二、内联样式CSS写法

内联样式

三、普通CSS文件写法

普通的CSS

四、CSS Module写法

css module

五、CSS in JS 解决方案

1. 认识 CSS in JS

2. 认识 styled-components

3. ES6标签模版字符串

4. styled的基本使用

5. props、attrs属性

6. styled高级特性

六、classnames库使用

1. Vue中添加class

2. React中添加class