组件化的CSS

前面说过，整个前端已经是组件化的天下。而CSS的设计就不是为组件化而生的，所以在目前组件化的框架中都在需要一种合适的CSS解决方案。

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

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

React中的CSS

React的CSS一直被吐槽，在Vue里面就方便了，可以通过在style标签里编写样式。通过是否添加scoped属性来决定编写的样式是全局有效还是局部有效，通过lang属性来设置less、sass等预处理器。通过内联样式风格的方式来根据最新状态设置和改变css。

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

相比而言，React官方并没有给出在React中统一的样式风格。由此，从普通的css，到css modules，再到css in js，有几十种不同的解决方案，上百个不同的库。大家一致在寻找最好的或者说最适合自己的CSS方案，但是到目前为止也没有统一的方案。

React中常见的几种编写CSS方案

内联样式

import React, { PureComponent } from 'react'

export default class App extends PureComponent {
  render() {
    const pStyle = {
      color:"orange",
      textDecoration:"underline"
    }
    return (
      <div>
        <h2 style={{fontSize:"50px",color:"red"}}>我是标题</h2>
        <p style = {pStyle}> 我是一段文字描述</p>
      </div>
      
    )
  }
}

内联样式的优点:

1.内联样式, 样式之间不会有冲突;
2.可以动态获取当前state中的状态。

缺点：

写法上都需要使用驼峰标识
某些样式没有提示
大量的样式, 代码混乱
某些样式无法编写(比如伪类/伪元素) (这个是巨坑)

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

普通的CSS

普通的css我们通常会编写到一个单独的文件，之后再进行引入。

就是在CSS文件中写css样式表

这样的编写方式和普通的网页开发中编写方式是一致的。

如果我们按照普通的网页标准去编写，那么也不会有太大的问题。
但是组件化开发中我们总是希望组件是一个独立的模块，即便是样式也只是在自己内部生效，不会相互影响。
但是普通的css都属于全局的css，样式之间会相互影响。

这种编写方式最大的问题是样式之间会相互层叠掉，Vue就比较好，有scoped这个东西。

css modules

css modules并不是React特有的解决方案，而是所有使用了类似于webpack配置的环境下都可以使用的。但是，如果在其他项目中使用个，那么我们需要自己来进行配置，比如配置webpack.config.js中的modules: true等。

React的脚手架已经内置了css modules的配置

.css/.less/.scss 等样式文件都修改成 .module.css/.module.less/.module.scss 等
之后就可以引用并且进行使用了

css modules确实解决了局部作用域的问题，也是很多人喜欢在React中使用的一种方案。

这些样式都是相互独立的，生成的时候会保证唯一性。

但是这种方案也有自己的缺陷。

引用的类名，不能使用连接符(.home-title)，在JavaScript中是不识别的。（你得自己规范css类名，这是个麻烦）
所有的className都必须使用{style.className} 的形式来编写。
不方便动态来修改某些样式，依然需要使用内联样式的方式。（这个是最大的毛病）
- 如下面的代码

如果你觉得上面的缺陷还算OK，那么你在开发中完全可以选择使用css modules来编写，并且也是在React中很受欢迎的一种方式

CSS in JS

实际上，官方文档也有提到过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。

认识styled-components

批评声音虽然有，但是在我们看来很多优秀的CSS-in-JS的库依然非常强大、方便：
- CSS-in-JS通过JavaScript来为CSS赋予一些能力，包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修改状态等等。
- 依然CSS预处理器也具备某些能力，但是获取动态状态依然是一个不好处理的点
- 所以，目前可以说CSS-in-JS是React编写CSS最为受欢迎的一种解决方案

目前比较流行的CSS-in-JS的库是styled-components

安装

yarn add styled-components

styled-components使用的是ES6标签模板字符串的语法，如果没有这个语法前提，可以先去学习下。并且我们也要装一个插件vscode-styled-components(语法高亮)。

我们打开页面样式就生效了。并且这个样式还不会产生冲突。

import React, { PureComponent } from 'react';

import styled from 'styled-components' //导入

//这里的div是个函数,这个函数返回值会返回React组件

const HomeWrapper = styled.div`
  font-size:50px;
  color:red;
`
export default class Home extends PureComponent {
  render() {
    return (
      <HomeWrapper>
         <h2 >我是home的标题</h2>
        <div >
          <span>轮播图</span>
        </div>
      </HomeWrapper>
    )
  }
}

如果里面想单独设置里面的元素，这里以h2为例，我们可以这样做：

我们也可以用类似less的语法

import React, { PureComponent } from 'react';

import styled from 'styled-components' //导入

//这里的div是个函数,这个函数返回值会返回React组件

const HomeWrapper = styled.div`
  font-size:50px;
  color:red;
  
  .banner{
    background-color: pink;
    span{
      color: green;
      &.active{
      color: blue;
      }
      &:hover{

      }
      &::after{

      }
    }
    
  }
  
`

const TitleWrapper = styled.h2`
  text-decoration:underline;
`

export default class Home extends PureComponent {
  render() {
    return (
      <HomeWrapper>
        <TitleWrapper >我是home的标题</TitleWrapper>
        <div className='banner'>
          <span>轮播图</span>
          <span className='active'>激活的</span>
        </div>
      </HomeWrapper>
    )
  }
}

真实开发我们不会把这些代码写到上面，那样看起来太乱了。我们会新建一个style.js文件。导出导入

动态样式

我们也可以把属性定义到上面我们还可以这样做从state处传递

import React, { PureComponent } from 'react';

import styled from 'styled-components' //导入

/**
 * 特点:
 *  1.props穿透
 *  2.attrs的使用
 *  3.传入state作为props属性
 */

const ProfileInput = styled.input.attrs({
  placeholder:'xxx',
  bColor:"red"
})`
  background-color: lightblue;
  border-color:${props => props.bColor};
  color:${props => props.color};
`

export default class Profile extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      color: "purple"
    }
  }
  render() {
    return (
      <div className="profile">
         <ProfileInput type="password"  color = {this.state.color}/>

         <h2 >我是Profile的标题</h2>
        <ul >
          <li >设置列表1</li>
            <li>设置列表1</li>
            <li>设置列表2</li>
            <li>设置列表3</li>
          </ul>
      </div>
    )
  }
}

高级特性 --继承

效果是一样的。

高级特性 --设置主题

设置主题，这样下面包裹的的组件都能用主题的样式了。使用主题的属性

React中的样式（CSS）