前沿
事实上，css一直是React的痛点，也是被很多开发者吐槽、诟病的一个点 对标Vue中css就好于React
- Vue通过在.vue文件中编写 <style> 标签来编写自己的样式;
- 通过是否添加 scoped 属性来决定编写的样式是全局有效还是局部有效;
- 通过 lang 属性来设置你喜欢的 less、sass等预处理器;
- 通过内联样式风格的方式来根据最新状态设置和改变css;
Vue在CSS上虽然不能称之为完美，但是已经足够简洁、自然、方便了，至少统一的样式风格不会出现多个开发人员、多个项目 采用不一样的样式风格。
相比而言，React官方并没有给出在React中统一的样式风格:
由此，从普通的css，到css modules，再到css in js，有几十种不同的解决方案，上百个不同的库;
大家一致在寻找最好的或者说最适合自己的CSS方案，但是到目前为止也没有统一的方案;
内联样式
内联样式是官方推荐的一种css样式的写法
style 接受一个采用小驼峰命名属性的 JavaScript 对象，，而不是 CSS 字符串;
并且可以引用state中的状态来设置相关的样式;
import React, { PureComponent } from 'react'
export class App extends PureComponent {
constructor() {
super()
this.state = {
titleSize: 30
}
}
addTitleSize() {
this.setState({ titleSize: this.state.titleSize + 2 })
}
render() {
const { titleSize } = this.state
return (
<div>
<button onClick={e => this.addTitleSize()}>增加titleSize</button>
<h2 style={{color: "red", fontSize: `${titleSize}px`}}>我是标题</h2>
<p style={{color: "blue", fontSize: "20px"}}>我是内容, 哈哈哈</p>
</div>
)
}
}
export default App
优点：
- 内联样式有自身的作用域 样式之间不会有冲突
- 可以动态获取state中的变量
缺点：
- 写法上都需要使用驼峰标识
- 某些样式没有提示
- 大量的样式, 代码混乱
- 某些样式无法编写(比如伪类/伪元素)
普通的css我们通常会编写到一个单独的文件，之后再进行引入
这种编写方式最大的问题是样式之间会相互层叠掉
◼ 所以官方依然是希望内联合适和普通的css来结合编写;
CSS Modules
CSS modules并不是React特有的解决方案，而是所有使用了类似于webpack配置的环境下都可以使用的。
如果在其他项目中使用它，那么我们需要自己来进行配置，比如配置webpack.config.js中的modules: true等。
React的脚手架已经内置了css modules的配置: .css/.less/.scss 等样式文件都需要修改成 .module.css/.module.less/.module.scss 等; 这样就会加入webpack来加入到编译流程树中
- 当使用less和scss webpack默认是不会来进行编译的 得需要使用style-loader css-loader less-loader loader进行辅助转换
- 在React中脚手架不会默报漏webpack 配置的。
- 一般使用craco （creat react app config）这个工具
缺点：
- 引用的类名，不能使用连接符(.home-title)，在JavaScript中是不识别的;
- 所有的className都必须使用{style.className} 的形式来编写;
- 不方便动态来修改某些样式，依然需要使用内联样式的方式;
style文件
.title {
font-size: 32px;
color: green;
}
.content {
font-size: 22px;
color: orange;
}
这种不可取的 没法在js中使用-
.hy-title {
}
import React, { PureComponent } from 'react'
import appStyle from "./App.module.css"
export class App extends PureComponent {
render() {
return (
<div>
<h2 className={appStyle.title}>我是标题</h2>
<p className={appStyle.content}>我是内容, 哈哈哈哈</p>
<Home/>
<Profile/>
</div>
)
}
}
export default App
CSS in JS
“CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义 React的思想中认为逻辑本身（JS）和UI是无法分离(HTML)的，所以才会有了JSX的语法
事实上CSS-in-JS的模式就是一种将样式(CSS)也写入到JavaScript中的方式，并且可以方便的使用JavaScript的状态;
注意此功能并不是 React 的一部分，而是由第三方库提供;
styled-components
- CSS-in-JS通过JavaScript来为CSS赋予一些能力，包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修改状态等等;
- 虽然CSS预处理器也具备某些能力，但是获取动态状态依然是一个不好处理的点;
标签模版字符串
就是通过模版字符串调用函数，如果我们在调用的时候插入其他的变量:
- 模板字符串被拆分了;
- 第一个元素是数组，是被模块字符串拆分的字符串组合; 后面的元素是一个个模块字符串传入的内容;
const name ='111' function foo (prarms){ console.log(prarms) } 第一种调用方式 foo() 第二种标签模版字符串 foo`aaa` foo`aaa${name}`
◼ 在styled component中，就是通过这种方式来解析模块字符串，最终生成我们想要 的样式的
基础用法
- 本质是通过函数的调用，最终 创建出一个组件:
- 这个组件会被自动添加上一个不重复的class;
- styled-components会给该class添加相关的样式;
- 支持直接子代选择器或后代选择器，并且直接编写样式;
- 可以通过**&符号**获取当前元素;
- 直接伪类选择器、伪元素等;
- props、attrs属性
- 获取props需要通过${}传入一个插值函数，props会作为该函数的参数;
- 这种方式可以有效的解决动态样式的问题;
- 支持样式的继承
- styled设置主题 跨组件使用
import styled from "styled-components"
import {
primaryColor,
largeSize
} from "./style/variables"
// 1.基本使用
export const AppWrapper = styled.div`
.footer {
border: 1px solid orange;
}
`
// const obj = {
// name: (props) => props.name || "why"
// }
// 2.子元素单独抽取到一个样式组件
// 3.可以接受外部传入的props
// 4.可以通过attrs给标签模板字符串中提供的属性
// 5.从一个单独的文件中引入变量
export const SectionWrapper = styled.div.attrs(props => ({
tColor: props.color || "blue"
}))`
border: 1px solid red;
.title {
font-size: ${props => props.size}px;
color: ${props => props.tColor};
&:hover {
background-color: purple;
}
}
.content {
font-size: ${largeSize}px;
color: ${primaryColor};
}
React中添加class 这个时候我们可以借助于一个第三方的库:classnames 很明显，这是一个用于动态添加classnames的一个库。
