在React中使用CSS Modules設定樣式

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

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

我一看到css modules這個詞我就懵了，畢竟在我印象中，css高階一點的就是用sass，less定義變數啊，寫個巢狀什麼的，modules是什麼鬼啊。學新東西都是這樣，一開始，好奇在拒絕，堅持看下去，大概就明白了。

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

另外，每次都需要把所有的樣式表都匯入到程式中，如果我們可以像使用js模組一樣，想用哪塊就用哪塊，是不是就很理想了。

css modules就解決了這個問題，它自動為每乙個類生成乙個雜湊值，可以惟一標誌這個類，因此避免了我們說的第乙個問題，它讓我們可以像使用js模組那樣，想用哪部分樣式，就引入哪部分樣式。下面我們來具體介紹它的使用方法。

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

/*
*/import react, from 'react';
import reactdom from 'react-dom';
/*引入我們定義的.scss檔案 
*/import styles from '../style/style.scss';
/*使用無狀態函式定義我們的元件
*/function
title() 
*/return
( 
/*在元件中引用 
*/);}/*
渲染到頁面中 
*/reactdom.render(
, 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 
// 新增全域性bgred
:global(.bgred)

import reactdom from 'react-dom';

/*引入我們定義的.scss檔案 */import styles from '../style/style.scss';

/*使用無狀態函式定義我們的元件*/

functiontitle()

/*渲染到頁面中 */reactdom.render(, document.body );

4. 使用composes組合樣式

我們知道，node.js中，我們可以用require引入模組，然後使用它們。css modules也提供了composes來該檔案中的樣式規則，甚至引用其它檔案中的樣式規則。

style/style.scss

*/.fontwhite .bgred

/*
*/import react, from 'react';
import reactdom from 'react-dom';
/*引入我們定義的.scss檔案 
*/import styles from '../style/style.scss';
/*使用無狀態函式定義我們的元件
*/function
title() rx_o02fhxktbzc"}
*/return
( 
/*在元件中引用 
*/);}/*
渲染到頁面中 
*/reactdom.render(
, document.body )

此時，就是新增了兩個類，html結構如下圖：

引入其它檔案中的樣式規則，寫composes： classname(要引入的類名) from '引入的檔案路徑即可'，最終效果同上，composes多少規則，就新增多少類。

在最後，給大家提供乙個js庫——classnames類庫，給我的感覺和angular中的ng-class差不多，將值為true的類新增上。

在React中使用CSS Modules設定樣式

在 React 中使用 Typescript

react系列（五）在React中使用Redux

在react元件中使用樣式

在React中使用CSS Modules設定樣式

在 React 中使用 Typescript

react系列（五）在React中使用Redux

在react元件中使用樣式

相關推薦