【React系列】React中的CSS

本文来自#React系列教程：https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg5MDAzNzkwNA==&action=getalbum&album_id=1566025152667107329)

一. React中的css方案

1.1. react 中的 css

事实上，css 一直是 React 的痛点，也是被很多开发者吐槽、诟病的一个点。

在组件化中选择合适的CSS解决方案应该符合以下条件：

• 可以编写局部css：css具备自己的具备作用域，不会随意污染其他组件内的原生；
• 可以编写动态的css：可以获取当前组件的一些状态，根据状态的变化生成不同的css样式；
• 支持所有的css特性：伪类、动画、媒体查询等；
• 编写起来简洁方便、最好符合一贯的css风格特点；
• 等等…

在这一点上，Vue做的要远远好于React：

• Vue通过在.vue文件中编写 <style><style> 标签来编写自己的样式；
• 通过是否添加 scoped 属性来决定编写的样式是全局有效还是局部有效；
• 通过 lang 属性来设置你喜欢的 less、sass等预处理器；
• 通过内联样式风格的方式来根据最新状态设置和改变css；
• 等等…

Vue在CSS上虽然不能称之为完美，但是已经足够简洁、自然、方便了，至少统一的样式风格不会出现多个开发人员、多个项目采用不一样的样式风格。

相比而言，React官方并没有给出在React中统一的样式风格：

• 由此，从普通的 css，到 css modules，再到 css in js，有几十种不同的解决方案，上百个不同的库；
• 大家一致在寻找最好的或者说最适合自己的CSS方案，但是到目前为止也没有统一的方案；

在这篇文章中，我会介绍挑选四种解决方案来介绍：

• 方案一：内联样式的写法；
• 方案二：普通的css写法；
• 方案三：css modules；
• 方案四：css in js（styled-components）；

1.2. 普通的解决方案

1.2.1. 内联样式

内联样式是官方推荐的一种css样式的写法：

• style 接受一个采用小驼峰命名属性的 JavaScript 对象，而不是 CSS 字符串；
• 并且可以引用state中的状态来设置相关的样式；

export default class App extends PureComponent {
   
  constructor(props) {
   
    super(props);

    this.state = {
   
      titleColor: "red"
    }
  }

  render() {
   
    return (
      <div>
        <h2 style={
   {
   color: this.state.titleColor, fontSize: "20px"}}>我是App标题</h2>
        <p style={
   {
   color: "green", textDecoration: "underline"}}>我是一段文字描述</p>
      </div>
    )
  }
}

内联样式的优点:

1. 内联样式, 样式之间不会有冲突

2. 可以动态获取当前state中的状态

内联样式的缺点：

1. 写法上都需要使用驼峰标识

2. 某些样式没有提示

3. 大量的样式, 代码混乱

4. 某些样式无法编写(比如伪类/伪元素)

所以官方依然是希望内联合适和普通的css来结合编写；

1.2.2. 普通的css

普通的css我们通常会编写到一个单独的文件。

App.js中编写React逻辑代码：

import React, {
    PureComponent } from 'react';

import Home from './Home';

import './App.css';

export default class App extends PureComponent {
   
  render() {
   
    return (
      <div className="app">
        <h2 className="title">我是App的标题</h2>
        <p className="desc">我是App中的一段文字描述</p>
        <Home/>
      </div>
    )
  }
}

App.css中编写React样式代码：