-
1.行内样式
-
行内样式需要写入一个样式对象,而这个样式对象的位置可以放在很多地方,例如
render
函数里、组件原型上、外链js文件中 -
2.使用
class
-
React推荐我们使用行内样式,因为React觉得每一个组件都是一个独立的整体
其实我们大多数情况下还是大量的在为元素添加类名,但是需要注意的是,
class
需要写成className
(因为毕竟是在写类js代码,会收到js规则的现在,而class
是关键字)
-
3.不同的条件添加不同的样式
有时候需要根据不同的条件添加不同的样式,---- 群组样式
<button class="btn btn-success"></button>
<button class="btn btn-danger"></button>
比如:完成状态,完成是绿色,未完成是红色。那么这种情况下,推荐使用classnames这个包
-
4.css-in-js
styled-components
是针对React写的一套css-in-js框架,简单来讲就是在js中写css。npm链接
5模块化
css文件必须是。*.module.css 方式。引入时必须使用。import styles from 结构,调用 使用styles.**方式