React-组件-CSS模块化

Css Module (推荐)

React 的脚手架已经内置了 css modules 的配置：

• .css/.less/.scss 等样式文件都修改成 .module.css/.module.less/.module.scss 等；

在以前我们的文件是这样的 index.css 如果使用了 CSS 的模块化之后，在之前的文件的基础上在加上 .module 即可，如，index.module.css，改造我们之前的案例，修改 Home.css 与 About.css：

Home.module.css:

.title {
    font-size: 50px;
    color: blue;
}

.content {
    color: #464612;
}

About.module.css:

.title {
    font-size: 50px;
    color: #a72153;
}

.content {
    color: #53be3b;
}

Home.js:

import React from 'react';
import HomeStyle from './Home.module.css';

class Home extends React.Component {
    render() {
        return (
            <div>
                <p className={HomeStyle.title}>我是home段落</p>
                <a className={HomeStyle.content} href={'https://www.cnblogs.com/BNTang/'}>我是home超链接</a>
            </div>
        )
    }
}

export default Home;

About.js:

import React from 'react';
import AboutStyle from './About.module.css';

class About extends React.Component {
    render() {
        return (
            <div>
                <p className={AboutStyle.title}>我是About段落</p>
                <a className={AboutStyle.content} href={'https://www.cnblogs.com/BNTang/'}>我是About超链接</a>
            </div>
        )
    }
}

export default About;

页面展示效果：

Css Modules 优点

• 编写简单, 有代码提示, 支持所有 CSS 语法
• 解决了全局样式相互污染问题

Css Modules 缺点

• 不可以动态获取当前 state 中的状态