一、
样式处理是React非常重要的一个环节。需要用到CSS Modues的概念及用法。我们会用到两种方式:
1、使用className prop来设置类名;
2、使用style设置内联样式;
内联样式的 style是以一个 json对象的形式设置的。
样式中的像素值:
const style = {width:200}; // React会自动给像素值后面添加 ‘px’。
二、CSS Modules
使用JavaScript来管理 CSS,现在 Webpack 的 css-loader 内置了CSS Modules的功能。实际开发过程中有以下几个问题:
1、解绝全局污染。2、解决命名混乱。3、依赖管理不彻底。4、无法共享变量。5、代码压缩不彻底。
引用:用import直接引用css文件:
import styles from './css/hello.css';
''''
<div className = {styles.norml}></div>
编译到html后:
<div class= 'normal-abcd5436'></div>
编译后,类名是经过计算的,名称基本就是唯一的,在生产环境修改规则,可生成更短的class名,提高css压缩效率。
使用了 CSS Modules 相当于在每个class名外添加了 :local,以此实现样式的局部化,如果想切换到全局模式,可使用
:global 来包裹:
/**局部样式*/
:local(.naomal){
color:#ffffff;
}
/**全局样式*/
:global(.btn){
color:#dedede;
}
/**使用多个全局样式*/
:global{
.link{
color: green;
},
.box{
color: red;
}
}
编译后的class命名规律:
CSS Modules的命名是从BEM扩展而来的,分三个级别:
1、Block: 对应模块名称,例 Dialog。
2、Element: 对应模块中的节点名,例 Confirm Button。
3、Modifier : 对应节点相关状态,例 highlight。
最终得到的class名称为 : Dialog_confim-button--highlight。
三、
如何在React项目中避免重复使用 styles.**。可以使用 react-css-modules。例:
import React ,{ Component} from 'react';
import CSSModules from 'react-css-modules';
import styles from './styles.css';
class Dialog extends Component{
render(){
return(
<div styleName = 'root'>
<div styleName = 'normal'>
</div>
</div>
)
}
}
export default CSSModules(Dialog,styles);