在react脚手架搭建的项目中使用样式模块化

在react的jsx语法中，为dom元素绑定class类名使用className,为了与js中的class关键字区分

在不使用样式模块化的情况下，我们为dom元素绑定class类名

例如：我们创建一个Hello的组件，引入Hello.css 为div直接绑定一个为title的class类名

import {Component} from 'react';
import './Hello.css';

class Hello extends Component{
    render(){
        return (
            <div className='title'>hello</div>
        )
    }
}

export default Hello;

css文件

.title{
    background: orange;
}

在页面上我们可以看到Hello组件有一个为title的类名，样式也生效了 那我们再创建一个Test组件 新建一个div class为title 没有引入任何样式

import {Component} from 'react';

class Test extends Component{
    render(){
        return (
            <div className="title">Test</div>
        )
    }
}

export default Test;

结果呢，Test组件里的div背景色也显示了，而且用的是Hello.css里的样式

为什么要使用css模块化

为了解决样式冲突问题，放置其他组件或者全局的样式覆盖了某个模块里的局部样式

如何使用css模块化

首先，确认你的项目是由 react 脚手架创建的

使用react脚手架搭建react项目

1、修改css文件名

例如：在Hello组件中的Hello.css文件，改名为 Hello.module.css

这里我直接新建了一个Hello.module.css 文件里内容不用修改

//Hello.module.css
.title{
    background-color: orange;
}

2.引入方式及绑定class方式修改

import {Component} from 'react';
//import './Hello.css';//未使用css模块化
import HelloCss from './Hello.module.css';//使用css模块化

class Hello extends Component{
    render(){
        return (
            <div className={HelloCss.title}>hello</div>
        )
    }
}

export default Hello;

如图，Hello组件的class类名成了动态生成的类名，而且Test组件的样式也没有因为Hello组件样式文件里的而改变，而是由app.js里的全局样式的.title样式所影响