今天看看在React中使用css的几种常用方式:

引用外部css

这个是最常见的一种css引入方式,我们现在外部写好一个css,内部直接使用:

引入css module

css module就是将css作为一个模块进行使用,在React中使用起来也很简单,只要在命名css的时候加上module就可以了,例如a.module.css,内部配置识别名字带有module的css,对它们会开启css module。

css module相比直接使用css,不会造成全局污染,最对使用对页面产生效果。使用上只用多加一个module的后缀就好了。

使用行内样式

常见的是定义一个变量,然后在style中引用它:

可以看一个稍微复杂一点的例子,可以合并多个变量或者字符串样式:

注意看上面的border,并没有写key,合并之后border变量就是key;还有上面transform中的ms前缀是唯一小写的前缀。

最简单就是直接在style中写:

上面style中的border等属性名不用打引号,它是key;height后面的10,不写'px',后期也会自动加上px。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字