Css Module介绍

栏目: CSS · 发布时间: 5年前

内容简介：CSS 的规则是全局的，任何一个组件的样式规则，都对整个页面有效。相信写css的人都会遇到样式冲突（污染）的问题。在App.js中我们引入子组件Child和style.cssstyle.css

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启动项目，可以看到页面两个标签都是显示红色

Css Module介绍

这是因为我们在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)

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 ，然后将 <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;

返回页面可以看到,样式生效

Css Module介绍

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

Css Module介绍

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

使用JS编译原生的CSS文件，使其具备模块化的能力，代表是 CSS Modules

CSS Modules不是将CSS改造的具有编程能力，而是加入了局部作用域、依赖管理，这恰恰解决了最大的痛点。可以有效避免全局污染和样式冲突，能最大化地结合现有 CSS 生态和 JS 模块化能力

webpack 自带的 css-loader 组件，自带了 CSS Modules，通过简单的配置即可使用

在React脚手架工具中，我们通过npm run eject将webpack配置文件暴露出来，找到webpack.config.js文件，在这个地方加上这句

Css Module介绍

修改webpack配置之后我们需要重启服务，返回页面可以看到之前通过这种方式引入的样式就不生效了 import './style.css';
Css Module介绍

现在我们要使用需要通过这样引入

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 Module介绍