摘要：的規則是全局的，任何一個組件的樣式規則，都對整個頁面有效。相信寫的人都會遇到樣式沖突污染的問題。自動生成的類名基本就是唯一的，大大降低了項目中樣式覆蓋沖突的幾率。關于更詳細的介紹可以參考這篇博客

CSS 的規則是全局的，任何一個組件的樣式規則，都對整個頁面有效。相信寫css的人都會遇到樣式沖突（污染）的問題。

在App.js中我們引入子組件Child和style.css

import React from "react";
import Child from "./Child";
import "./style.css";

const App = () => {
  return (
    

      
hello
      
    
  )
}
    
export default App;

style.css

.aaa {
    background-color: red;
}

然后Child中又引入了style1.css文件, 我們一不小心把style1.css中的樣式又寫成了aaa，按照預期的結果App組件的p標簽背景色應該是紅色，Child組件中的p標簽背景色是藍色，那是不是這樣的呢？
child.js

import React from "react";
import "./style1.css";

const Child = () => {
  return (
    

      
child
    
  )
}
    
export default Child;

style1.css

.aaa {
    background-color: blue;
}

我們yarn start啟動項目，可以看到頁面兩個標簽都是顯示紅色

這是因為我們在App中通過這樣的方式引入import "./style.css";它的樣式作用于全局，如果我們不注意命名的話極有可能造成樣式名重復的問題，進而造成上面樣式沖突的問題

為了解決全局污染的問題，那就把class命名寫長一點吧、加一層父級選擇器、降低沖突的幾率，那么CSS命名混亂了

CSS 模塊化的解決方案有很多，但主要有三類：

規范化CSS的解決方案如：BEM、OOCSS、AMCSS、SMACSS

徹底拋棄 CSS，用 JavaScript 寫 CSS 規則，styled-components就是其中代表。

安裝

npm install --save styled-components

一般在做項目開始時，我們都會定義一些初始化樣式，這些樣式都是全局有效的，那么使用這個方法該怎么定義這些全局樣式呢？

最新版的 styled-components v4 已經將原有的injectGlobal() 方法替換成了createGlobalStyle() ，而且用法也和之前的 injectGlobal 方法不同了

在src下新建一個style.js(注意這里是js后綴而不是css后綴，因為我們要在js中寫css)

1、引入新的API createGlobalStyle ，在下面創建一個 GlobalStyle 變量，用 createGlobalStyle 方法把全局樣式包裹在其中（包裹css樣式使用反引號字符串）

import { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: "";
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
`;

2、在 src/App.js"中(一般是最外層組件)，引入剛剛定義的 GlobalStyle ，然后將 組件放在 render() 中最外層元素下面

import React from "react";
import { GlobalStyle } from "./style";
import Header from "./common/header";

function App() {
  return (
    

      
      

    
  );
}

export default App;

像這樣引用好之后，就可以正常使用全局樣式啦

上面是使用styled-components工具定義全局樣式的方法，那么定義局部樣式該如何使用呢？（這里只介紹最簡單的用法，具體可以參考官網）
在Header組件所處的文件夾下新建一個自己的樣式文件style.js

import styled from "styled-components";
export const HeaderWrapper = styled.div`
    position: relative;
    height: 56px;
    border-bottom: 1px solid #f0f0f0;
    background: red;
`;

上面我們導出了一個標簽div，這個標簽中帶有一些樣式，使用styled-components后這個標簽也變成了一個組件HeaderWrapper并已導出，接著我們在Header組件中就可以使用這個組件了

import React, { Component } from "react";
import {
    HeaderWrapper
} from "./style";

class Header extends Component {
    render() {
        return (
            
                111
            
        )
    }
}

export default Header;

返回頁面可以看到,樣式生效

并且通過這種方式生成的樣式名是隨機的，這樣就不會出現樣式名沖突的問題，并且這個標簽組件HeaderWrapper只在當前Header組件中使用。那么樣式就只會在這個Header組件中生效

使用JS編譯原生的CSS文件，使其具備模塊化的能力，代表是CSS Modules

CSS Modules不是將CSS改造的具有編程能力，而是加入了局部作用域、依賴管理，這恰恰解決了最大的痛點?？梢杂行П苊馊治廴竞蜆邮經_突，能最大化地結合現有 CSS 生態和 JS 模塊化能力

webpack 自帶的 css-loader 組件，自帶了 CSS Modules，通過簡單的配置即可使用

在React腳手架工具中，我們通過npm run eject將webpack配置文件暴露出來，找到webpack.config.js文件，在這個地方加上這句

修改webpack配置之后我們需要重啟服務，返回頁面可以看到之前通過這種方式引入的樣式就不生效了import "./style.css";

現在我們要使用需要通過這樣引入

import styles from "./style.css";

然后在下面通過這樣的方式使用

const App = () => {
  return (
    

      
hello
      
    
  )
}

同樣在Child中

import React from "react";
import styles from "./style1.css";

const Child = () => {
  return (
    

      
child
    
  )
}
    
export default Child;

刷新頁面，可以看到雖然兩個文件中的樣式名都是aaa，但是現在他們之間互不影響

這是因為CSS Modules 對 CSS 中的 class 名都做了處理，使用對象來保存原 class 和混淆后 class 的對應關系。CSS Modules自動生成的class類名基本就是唯一的，大大降低了項目中樣式覆蓋沖突的幾率。

關于CSS Module更詳細的介紹可以參考這篇博客(https://segmentfault.com/a/11...