Css Module介绍

CSS 的规则是全局的，任何一个组件的样式规则，都对整个页面有效。相信写css的人都会遇到样式冲突（污染）的问题。

在App.js中咱们引入子组件Child和style.css

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

const App = () => {
  return (
    <div>
      <p className="aaa">hello</p>
      <Child />
    </div>
  )
}
    
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 (
    <div>
      <p className="aaa">child</p>
    </div>
  )
}
    
export default Child;

style1.css

.aaa {
    background-color: blue;
}

咱们yarn start启动项目，能够看到页面两个标签都是显示红色

这是由于咱们在App中经过这样的方式引入import './style.css';它的样式做用于全局，若是咱们不注意命名的话极有可能形成样式名重复的问题，进而形成上面样式冲突的问题

为了解决全局污染的问题，那就把class命名写长一点吧、加一层父级选择器、下降冲突的概率，那么CSS命名混乱了

CSS 模块化的解决方案有不少，但主要有三类：

（1）、命名约定

规范化CSS的解决方案如：BEM、OOCSS、AMCSS、SMACSS

（2）、CSS in JS

完全抛弃 CSS，用 JavaScript 写 CSS 规则，styled-components就是其中表明。

安装

npm install --save styled-components

通常在作项目开始时，咱们都会定义一些初始化样式，这些样式都是全局有效的，那么使用这个方法该怎么定义这些全局样式呢？

最新版的 styled-components v4 已经将原有的injectGlobal() 方法替换成了createGlobalStyle() ，并且用法也和以前的 injectGlobal 方法不一样了

在src下新建一个style.js(注意这里是js后缀而不是css后缀，由于咱们要在js中写css)

• 一、引入新的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;
    }
`;

• 二、在 src/App.js'中(通常是最外层组件)，引入刚刚定义的 GlobalStyle ，而后将<GlobalStyle /> 组件放在 render() 中最外层元素下面

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

function App() {
  return (
    <div>
      <GlobalStyle />
      <Header />
    </div>
  );
}

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 (
            <HeaderWrapper>
                111
            </HeaderWrapper>
        )
    }
}

export default Header;

返回页面能够看到,样式生效

而且经过这种方式生成的样式名是随机的，这样就不会出现样式名冲突的问题，而且这个标签组件HeaderWrapper只在当前Header组件中使用。那么样式就只会在这个Header组件中生效

（3）、使用JS 来管理样式模块

使用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 (
    <div>
      <p className={styles.aaa}>hello</p>
      <Child />
    </div>
  )
}

一样在Child中

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

const Child = () => {
  return (
    <div>
      <p className={styles.aaa}>child</p>
    </div>
  )
}
    
export default Child;

刷新页面，能够看到虽然两个文件中的样式名都是aaa，可是如今他们之间互不影响

这是由于CSS Modules 对 CSS 中的 class 名都作了处理，使用对象来保存原 class 和混淆后 class 的对应关系。CSS Modules自动生成的class类名基本就是惟一的，大大下降了项目中样式覆盖冲突的概率。

关于CSS Module更详细的介绍能够参考这篇博客( https://segmentfault.com/a/11...