l 引用的差异:
传统html文件中css文件引用方式:
<link rel="stylesheet" type="text/css" href="mystyle.css">
ReactJs中css文件引用方式:
你可以直接采用require: require('./Category.css')
你也可以采用import: import styles from './Category.css'
l 使用差异:
传统css的使用方式是设置class: <div class=”center”>test </div>
ReactJs中css的使用方式是设置className(因为class已经成为了关键字)。
<div className='entry'>test </div>
另外
如果你采用require的方式,你可以直接在页面元素中使用css文件中的样式名。
如果你采用import styles from './Category.css'的方式,则应采用以下方式。
<div className={style.entry}>test </div>
l 最终解析文件的差异:
传统css文件一般依然保持着源码状态。
在ReactJS中,Css文件最终将会对css样式名进行转换,例如在index.js文件中,引用style.css:
.customButton{
Width:100px
Heigth:30px
}
将转化为:
.index_customButton_23U0x{
Width:100px
Heigth:30px
}.
其中23U0x是随机数,这样转化的结果将避免最终的单页面中,css样式名不存在同名冲突。
基本上ReactJS的css文件的使用差异到此为止了,你可以按照传统Css样式的定义和使用方式,随意使用了,你可以采用单一样式、设置元素标签样式、组合样式、层级样式等任意方式。
直接在标签上写style 或 定义一个对象写好样式然后赋值给style属性 记得大小写
通过import css|scss|sass 文件形式 使用方面跟html一样只是class要写成className 然后将定义好的样式名填进去即可
如果项目使用create-react-app的话,还可以使用另一种方法 样式文件名需要XXX.module.(s|sa|c)ss,使用的话像这样 import style from '你的样式文件目录'
<div className={style.xxx(样式名称)}>demo</div> 这样有点一好处就是不会造成样式重复问题,他在打包过程中会将className中的名称混淆