React——样式处理

一、

      样式处理是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);