react脚手架，样式模块化

-

假如有一个hello组件

hello组件：

import { Component } from 'react'
import hello from './index.module.css' // 模块化
import './index.css' // 非模块化   后引入的组件，假如和前面的的组件内的class名重复，就会覆盖前面组件的样式

export default class Hello extends Component {
  render() {
    return (
      <h2 className={hello.title}>hello, react</h2>
    )
  }
}

 

index.module.css

.title{
  background-color: orange;
}

react样式模块化，关键在于，给样式文件加上.module关键字，比如index.css变成模块化后 index.module.css

在组件中这样引入：

import hello from './index.module.css' // 模块化

绑定时这样绑定：

<h2 className={hello.title}>hello, react</h2>

 

 

 

 

-