摘要：的規(guī)則是全局的，任何一個(gè)組件的樣式規(guī)則，都對(duì)整個(gè)頁(yè)面有效。相信寫的人都會(huì)遇到樣式?jīng)_突污染的問(wèn)題。自動(dòng)生成的類名基本就是唯一的，大大降低了項(xiàng)目中樣式覆蓋沖突的幾率。關(guān)于更詳細(xì)的介紹可以參考這篇博客

CSS 的規(guī)則是全局的，任何一個(gè)組件的樣式規(guī)則，都對(duì)整個(gè)頁(yè)面有效。相信寫css的人都會(huì)遇到樣式?jīng)_突（污染）的問(wèn)題。

在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，按照預(yù)期的結(jié)果App組件的p標(biāo)簽背景色應(yīng)該是紅色，Child組件中的p標(biāo)簽背景色是藍(lán)色，那是不是這樣的呢？
child.js

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

const Child = () => {
  return (
    

      
child
    
  )
}
    
export default Child;

style1.css

.aaa {
    background-color: blue;
}

我們yarn start啟動(dòng)項(xiàng)目，可以看到頁(yè)面兩個(gè)標(biāo)簽都是顯示紅色

這是因?yàn)槲覀冊(cè)贏pp中通過(guò)這樣的方式引入import "./style.css";它的樣式作用于全局，如果我們不注意命名的話極有可能造成樣式名重復(fù)的問(wèn)題，進(jìn)而造成上面樣式?jīng)_突的問(wèn)題

為了解決全局污染的問(wèn)題，那就把class命名寫長(zhǎng)一點(diǎn)吧、加一層父級(jí)選擇器、降低沖突的幾率，那么CSS命名混亂了

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

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

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

安裝

npm install --save styled-components

一般在做項(xiàng)目開(kāi)始時(shí)，我們都會(huì)定義一些初始化樣式，這些樣式都是全局有效的，那么使用這個(gè)方法該怎么定義這些全局樣式呢？

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

在src下新建一個(gè)style.js(注意這里是js后綴而不是css后綴，因?yàn)槲覀円趈s中寫css)

1、引入新的API createGlobalStyle ，在下面創(chuàng)建一個(gè) GlobalStyle 變量，用 createGlobalStyle 方法把全局樣式包裹在其中（包裹c(diǎn)ss樣式使用反引號(hào)字符串）

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工具定義全局樣式的方法，那么定義局部樣式該如何使用呢？（這里只介紹最簡(jiǎn)單的用法，具體可以參考官網(wǎng)）
在Header組件所處的文件夾下新建一個(gè)自己的樣式文件style.js

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

上面我們導(dǎo)出了一個(gè)標(biāo)簽div，這個(gè)標(biāo)簽中帶有一些樣式，使用styled-components后這個(gè)標(biāo)簽也變成了一個(gè)組件HeaderWrapper并已導(dǎo)出，接著我們?cè)贖eader組件中就可以使用這個(gè)組件了

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

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

export default Header;

返回頁(yè)面可以看到,樣式生效

并且通過(guò)這種方式生成的樣式名是隨機(jī)的，這樣就不會(huì)出現(xiàn)樣式名沖突的問(wèn)題，并且這個(gè)標(biāo)簽組件HeaderWrapper只在當(dāng)前Header組件中使用。那么樣式就只會(huì)在這個(gè)Header組件中生效

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

CSS Modules不是將CSS改造的具有編程能力，而是加入了局部作用域、依賴管理，這恰恰解決了最大的痛點(diǎn)。可以有效避免全局污染和樣式?jīng)_突，能最大化地結(jié)合現(xiàn)有 CSS 生態(tài)和 JS 模塊化能力

webpack 自帶的 css-loader 組件，自帶了 CSS Modules，通過(guò)簡(jiǎn)單的配置即可使用

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

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

現(xiàn)在我們要使用需要通過(guò)這樣引入

import styles from "./style.css";

然后在下面通過(guò)這樣的方式使用

const App = () => {
  return (
    

      
hello
      
    
  )
}

同樣在Child中

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

const Child = () => {
  return (
    

      
child
    
  )
}
    
export default Child;

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

這是因?yàn)镃SS Modules 對(duì) CSS 中的 class 名都做了處理，使用對(duì)象來(lái)保存原 class 和混淆后 class 的對(duì)應(yīng)關(guān)系。CSS Modules自動(dòng)生成的class類名基本就是唯一的，大大降低了項(xiàng)目中樣式覆蓋沖突的幾率。

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