在React中使用CSS Modules設置樣式

　　最近，一直在看React。。。那真的是一個一直在學的過程啊，從配置環境webpack，到基礎知識jsx，babel，es6，沒有一個不是以前沒有接觸的。其實，我心裏是興奮的啊，畢竟，活着就是要接觸一些新的東西啊，那樣纔有意思啊。

　　反正多學點，確定是沒錯的。哈哈。。。進入正題啦

　　我一看到CSS Modules這個詞我就懵了，畢竟在我印象中，CSS高端一點的就是用SASS，LESS定義變量啊，寫個嵌套什麼的，Modules是什麼鬼啊。學新東西都是這樣，一開始，好奇在拒絕，堅持看下去，大概就明白了。

1. CSS Modules引入目的

　　寫過CSS的人，應該都對一大長串選擇器選中一個元素不陌生吧，這種方式，其實定義的就是全局樣式，咱們時常會由於選擇器權重問題，沒有把咱們想要的樣式加上去。

　　另外，每次都須要把全部的樣式表都導入到程序中，若是咱們能夠像使用js模塊同樣，想用哪塊就用哪塊，是否是就很理想了。

　　CSS Modules就解決了這個問題，它自動爲每個類生成一個哈希值，能夠唯一標誌這個類，所以避免了咱們說的第一個問題，它讓咱們能夠像使用js模塊那樣，想用哪部分樣式，就引入哪部分樣式。下面咱們來具體介紹它的使用方法。

2.CSS Modules使用方法

　　1) 如何在開啓CSS Modules

　　首先，你須要配置好你的webpack環境，由於咱們須要webpack的css-loader加載器中配置選項，開啓CSS Modules，你可查看css-loader文檔，你會發現下面這個表格

這就是css-loader的參數表，其中你的webpack-config.js中loader字段中的css-loader配置後面添加modules，就能夠開啓CSS Modules。以下圖所示：

　　如今，你已經能夠在你的項目中使用CSS Modules功能了。

　　2）CSS Modules用法

　　1.基本使用方法

　　在你的項目中，添加一個CSS文件，而後你就能夠像引入js模塊同樣，在你的js文件中引入這個文件存放到一個對象中。這個對象中是一個包含連個屬性的對象，其值就是自動生成的類名。這個類名也會替換頁面中的類名。

/* style.scss */
.bgRed {
    background-color: #f00;
}

/* app/app.js */

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
/* 引入咱們定義的.scss文件 */
import styles from '../style/style.scss';

/* 使用無狀態函數定義咱們的組件*/
function Title() {
    console.log(styles);
    /* 打印引入的styles，是一個包含連個屬性的對象，其值就是自動生成的類名
        Object {white: "_24PAw-tvdzL8pt4nyAvnJX", bgRed: "_2R9YNZv7rx_o02FHxKTBzC"}
     */
    return (
        /* 在組件中引用 */
        <h1 className={styles.bgRed}>Hello React!</h1>
    );
}

/* 渲染到頁面中 */
ReactDOM.render(<Title />, document.body );

 最終頁面結構，以下圖所示：

　　2. 自定義命名規則

　　上面生稱的類名，徹底是自動生成，若是本身本身規定命名規則呢，也是很簡單的，只須要在上面配置modules後面添加&localIdentName＝配置規則，如：

'css-loader?modules&localIdentName=[name]__[local]-[hash:base64:5]' //style__bgRed-2R9YN,local對應所在文件夾名，local對應文件名，最後是哈希值

　　3. 全局類名和本地類名

　　咱們可使用:global(className)來標識這個類是全局類名，所以CSS Modules不對其類名進行轉化，:local(className)則相反，若是不用這兩個包裹的話，默認是local.

/* style.scss */ .bgRed { background-color: #f00; }

// 添加全局bgRed
:global(.bgRed) {
    background-color: #f00;
}

/* app/app.js */ import React, {Component} from 'react'; import ReactDOM from 'react-dom'; /* 引入咱們定義的.scss文件 */ import styles from '../style/style.scss'; /* 使用無狀態函數定義咱們的組件*/ function Title() { console.log(styles); return ( /* 在組件中全局的bgRed,此時咱們能夠訪問到咱們全局定義的bgRed，它並無被轉化 */ <h1 className="bgRed"}>Hello React!</h1>  ); } /* 渲染到頁面中 */ ReactDOM.render(<Title />, document.body );

　　4. 使用composes組合樣式

　　咱們知道，node.js中，咱們能夠用require引入模塊，而後使用它們。CSS Modules也提供了composes來該文件中的樣式規則，甚至引用其它文件中的樣式規則。

　　

/* style/style.scss */

.fontWhite {
    color: #fff;
}
.bgRed {
    composes: fontWhite;
    background-color: #f00;
}

/* app/app.js */

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
/* 引入咱們定義的.scss文件 */
import styles from '../style/style.scss';

/* 使用無狀態函數定義咱們的組件*/
function Title() {
    console.log(styles);
    /* 打印引入的styles，是一個包含連個屬性的對象，其值就是自動生成的類名
        Object {fontWhite: "style__fontWhite-3jipu", bgRed: "style__bgRed-2R9YN style__fontWhite-3jipu"}rx_o02FHxKTBzC"}
     */
    return (
        /* 在組件中引用 */
        <h1 className={styles.bgRed}>Hello React!</h1>
    );
}

/* 渲染到頁面中 */
ReactDOM.render(<Title />, document.body )

此時，就是添加了兩個類，html結構以下圖：

引入其它文件中的樣式規則，寫composes： className(要引入的類名) from '引入的文件路徑便可'，最終效果同上，composes多少規則，就添加多少類。

 

最後：你們有名有發現，我一直都在類上作文章，那是由於CSS Modules只轉換class名相關的樣式。你們要注意啦。

在最後，給你們提供一個js庫——classnames類庫，給個人感受和angular中的ng-class差很少，將值爲true的類添加上。

 

webpack環境地址：https://github.com/DiligentYe/react-webpack-env