一文讲清楚React中CSS的引入方式

一文讲清楚React中CSS的引入方式

1. 概述

• 在进行React组件开发的时候，难免要写一些CSS样式，比如我们要根据不同的业务业务逻辑，定义不同颜色的按钮，那么如何把CSS样式合理的引入到React，成为了组件的实现关键一步
• 我们希望他拥有下面几个特点：
  • 局部编写，不相互污染
  • 支持动态编写，可以根据组件的状态生成不同的样式
  • 支持所有css特性
  • 符合css风格
• 这点vue做的是非常好的，React表现如何呢，且看下文

2. CSS引入方式

2.1 在组件内直接使用

• 直接在组件中编写css样式变量，让后通过style属性绑定

import React from 'react'
const spanStyle={
    color:'red',
}
function App(){
    return(
        <span style={spanStyle}>再组件内直接使用</span>
    )
}
export default App

• 这种方式的有点在于样式之间不会有冲突，而且可以轻松拿到state的值
• 缺点是样式属性需要使用驼峰写法，属性值需要用引号包裹，不仅写法繁琐，而且会出现没有提示等问题，还会造成篇幅冗长等问题

2.2 组件中引入css文件

• 我们把CSS样式单独抽离一个css文件，然后再在组件中进行导入
• 比如新建一个App.css

  .red-span{
    color:red
  }
  

import React from 'react'
import './App.css'

function App(){
    return(
        <span className="red-span">再组件内直接使用</span>
    )
}
export default App

• 这种方式的优点在于组件代码省去css部分，变得清晰
• 缺点是这样定义的样式是全局样式，会产生样式冲突

2.3 组件中引入.module.css

• 这种方式跟上述方式有点类似，都是在组件内引入一个css文件，不同点在于这种方式引入的是一个module，他只对当前组件生效，不会产生全局污染
• 这种方式是webpack的特工方案，需要配置webpack的modules：true
• 新建App.module.css

  .redspan{
    color:red
  }

import React from 'react'
import styles from './App.module.css'

function App(){
    return(
        <span className={styles.redspan}>再组件内直接使用</span>
    )
}
export default App

• 这种方式的优点在于局部生效
• 但缺点是不能通过xx-xx命名类名，
• 而且绑定样式的时候需要通过{style.xxx}来绑定，书写比较麻烦
• 也不方便根据state动态设置

2.4 CSS in JS

• 一句话，就是把CSS写在JS里面，并将样式与组件逻辑相结合
• 我们会用第三方库，比如styled-components

npm install styled-components

• 至于知否单独封装一个js，完全看实际情况，可以单独抽离一个js文件，也可以直接写在组件里面，这里用抽离方式来写
• 新建一个style.js

import styled from 'styled-components'
const MySpan=style.span`
    color:red
`
export default MySpan

import React from 'react'
import MySpan from './style.js'

function App(){
    return(
        <MySpan >Css in Js</MySpan>
    )
}
export default App

• 这种方式的优点是显而易见的，样式与组件紧密结合，提高了组件的可重用性，同时支持根据组件的props传递动态样式，灵活性高
• 缺点在于在运行时生成样式，可能会带来一定性能开销，但是交互很小

3. 总结

• 在一般的开发中，CSS in JS这种方式可以满足大部分的场景，其他方式可以在实际项目中结合着使用