React中编写CSS实例详解.docx

第

React中编写CSS实例详解

目录正文内联样式普通的CSScssmodulescssinjs样式组件引入外部变量默认值引入全局样式provider样式继承动态添加class

正文

目前，前端最流行的开发方式是组件化，而CSS的设计本身就不是为组件化而生的，所以在目前组件化的框架中都在需要一种合适的CSS解决方案

在组件化开发环境下的CSS，应该满足如下需求:

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

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

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

由此，从普通的css，到cssmodules，再到cssinjs，有几十种不同的解决方案，上百个不同的库

大家一致在寻找最好的或者说最适合自己的CSS方案，但是到目前为止也没有统一的方案

内联样式

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

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

优点

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

缺点

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

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

importReact,{PureComponent}fromreact

exportclassAppextendsPureComponent{

constructor(props){

super(props)

this.state={

color:red

render(){

return(

divskyblue}}App/div

exportdefaultApp

普通的CSS

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

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

但是使用这种方式编写我们的css有一个致命缺点，即没有自己的样式作用域

默认引入的样式都是全局样式

importReact,{PureComponent}fromreact

import./style.css

exportclassAppextendsPureComponent{

constructor(props){

super(props)

this.state={

color:red

render(){

return(

divApp/div

exportdefaultApp

cssmodules

cssmodules并不是React特有的解决方案，而是所有使用了类似于webpack配置的环境下都可以使用的

如果在其他项目中使用它，那么我们需要自己来进行配置，比如配置webpack.config.js中的modules:true等

如果使用React脚手架，其内部已经内置了cssmodules的配置

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

importReact,{PureComponent}fromreact

//引入cssmodules-实际会将对应的css文件编译为一个JS对象

//当我们将一个样式文件的后缀名修改为.module.css的时候，对应样式文件就变成了css样式模块

importAppStylefrom./style.module.css

exportclassAppextendsPureComponent{

constructor(props){

super(props)

this.state={

color:red

render(){

return(

div

cssmodules会将