React项目中使用CSS 样式的各种方式

普通的 CSS 文件（全局样式）
项目中所有普通css文件里面的类名如果相同，会相互污染。

// A组件内的index.css文件
.aaa{
    color: '#fff';
}
// B组件内的index.css文件
.aaa{
    color: '#000';
}
// A组件内的index.jsx文件
import '.A/styles.css'
function func(){
    return <div classname="aaa"></div> // 此处div元素的样式同时被A/B组件内的index.css文件影响
}

CSS Module（CSS模块，避免类名冲突）

1. 创建一个xxx.module.css文件
2. 在组件中引入该css文件：import classes from './xxx.module.css'
3. 通过classname来设置类名：<div classname={classes.box}></div>

注：

1. CSS模块可以动态的生成唯一的class值，相当于Vue的scoped局限。
2. 使用Umi搭建的项目，可以直接引入xxx.css样式文件并存到一个变量上并赋值到classname 属性，就自动将样式以 CSS Module 的形式引入，不用引入像这种xxx.module.css文件也可实现样式不被污染。要注意，如果classname 属性赋值为字符串，则无效，样式会被其他组件的同名类名相互污染。

// 在umi项目中，`CSS Module`自动生效
import styles from "./index.css";
function func(){
    return <div classname={styles}></div>
}

// 在umi项目中，`CSS Module`不会生效，同类名样式会相互污染
// index.css文件
.aaa{
    background-color: "#f00";
}
// index.jsx文件
import './index.css'
function func(){
    return <div classname="aaa"></div>
}

内联样式
通过 style 属性来设置样式，只对当前元素及其子元素有效，建议只用于简单的样式场景

const style = {
    fontSize: '16px',
    color: '#f00'
}
function func(){
    return <div style={style}></div>
}