目录:
1 React中CSS的概述
2 内联样式CSS写法
3 普通CSS文件写法
4 CSS Module写法
5 CSS in JS解决方案
6 classnames库使用
一、React中CSS的概述
对css的要求有:1、有自己的作用域;2、能够使用js中的变量控制css的值;3、支持所有css特性;4、编写起来必须和原来的css一样
二、内联样式CSS写法(了解)
内联样式就是标签上有style属性,可以通过字符串模板来做到动态数据。
三、普通CSS文件写法(了解)
和普通的写css样式并引入是一样的,直接import引入,缺点就是全局性的,只要css类名一样就会出现效果,也可能会覆盖效果。
四、CSS Module写法(了解)
react脚手架已经内置了css modules,不用自己配置了
import引入方式发生变化,className类名的类名需要从你import引入的命名来设置
缺点是不能再css文件里面写入有 -(杠)的类名,因为在js里面不识别,所以必须使用小驼峰的类名
五、CSS in JS解决方案(重要)
(一)styled-components的使用方法:
1、先安装styled-components
npm install styled-components
2、安装styled-components插件,方便在js文件里面写css样式
3、创建一个任意后缀为js的文件并编写css样式
需要import引入styled-components,并制定输出代替div的组件名字(下图设置名字叫AppWrapper),在模板字符串中编写普通css样式。样式可以使用&号,并添加伪类。
4、在需要使用css的jsx文件里面import引入styled-components,并替换掉选择好的标签。
5、如果内部样式比较复杂,我们可以选择抽取(下图就是抽取了className为section的div标签进行抽取成另外一个组件,然后在应用styled-component的js文件里面编写css)
抽取
最后编写成另外一个样式组件
(二)样式组件可以接收外部传进来的props,其实这里就是可以很轻松的让css样式的值受到js的控制
1、 在父组件给SectionWrapper样式组件里面传递参数,应用styled-component的js文件里面使用函数的方法来获取props参数
2、如果父组件没有给样式组件添加参数,那么我们可以给样式组件添加默认值,方法就是在div后面添加.sttrs({})
下图写法是错误的,你想判断 函数 || "blue" 当函数不输出东西的时候输出blue,但是函数肯定会输出东西,所以blue永远取不到
(三)我们可以创建一个专门存储全局变量的js文件,这个文件引入到样式组件的文件里面就可以做到全局管理变量了。和less和scss的全局css变量差不多
1、创建一个存储全局变量的js文件,这里就叫做variables.js
2、编写变量
3、样式组件使用全局变量 ,import引入全局变量js文件,再通过模板字符串${变量名}
(四)全局变量的设置也可以通过设置主题来实现,必须用在顶层并且变量的内容必须是对象类型。
使用方法是必须用在顶层,并且传递的是对象类型
在app下的所有组件都可以使用主题给的变量
(五)继承
npm install styled-components
六、classnames库使用
需要安装
npm install classnames
需要引入包