编程课件-08_React的CSS方式.pdf

React中如何编写CSS？

王红元coderwhy

目录

1React中CSS的概述

content

2内联样式CSS写法

3普通CSS文件写法

4CSSModule写法

5CSSinJS解决方案

6classnames库使用

coderwhy组件化天下的CSS

◼前面说过，整个前端已经是组件化的天下：

而CSS的设计就不是为组件化而生的，所以在目前组件化的框架中都在需要一种合适的CSS解决方案。

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

可以编写局部css：css具备自己的具备作用域，不会随意污染其他组件内的元素；

可以编写动态的css：可以获取当前组件的一些状态，根据状态的变化生成不同的css样式；

支持所有的css特性：伪类、动画、媒体查询等；

编写起来简洁方便、最好符合一贯的css风格特点；

等等...

coderwhyReact中的CSS

◼事实上，css一直是React的痛点，也是被很多开发者吐槽、诟病的一个点。

◼在这一点上，Vue做的要好于React：

Vue通过在.vue文件中编写stylestyle标签来编写自己的样式；

通过是否添加scoped属性来决定编写的样式是全局有效还是局部有效；

通过lang属性来设置你喜欢的less、sass等预处理器；

通过内联样式风格的方式来根据最新状态设置和改变css；

等等...

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

采用不一样的样式风格。

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

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

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

coderwhy内联样式

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

style接受一个采用小驼峰命名属性的JavaScript对象，，而不是CSS字符串；

并且可以引用state中的状态来设置相关的样式；

◼内联样式的优点:

1.内联样式,样式之间不会有冲突

2.可以动态获取当前state中的状态

◼内联样式的缺点：

1.写法上都需要使用驼峰标识

2.某些样式没有提示

3.大量的样式,代码混乱

4.某些样式无法编写(比如伪类/伪元素)

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

coderwhy普通的css

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

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

如果我们按照普通的网页标准去编写，那么也不会有太大的问题；

但是组件化开发中我们总是希望组件是一个独立的模块，即便是样式也只是在自己内部生效，不会相互影响；

但是普通的css都属于全局的css，样式之间会相互影响；

◼这种编写方式最大的问题是样式之间会相互层叠掉；

coderwhycssmodules

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

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

◼React的脚手架已经内置了cssm