react 类名作用域冲突

问题情境

两个不同的文件夹中有相同的class类名，此时两文件夹中对这个类名设置的样式会冲突。

如：Login和Home中都有class类名为title的标签，此时设置的样式就会冲突。

解决方法

1. 样式模块化

样式文件后缀由.css改为.module.css

// 引入css
import login from "./Login/Login.module.css";

// 使用样式
<span className={login.title}><span/>

/* Login.module.css文件 */
.title {
    font-size: 12px;
}

2. 使用 less 、sass/scss

.login {
    .title {
        font-size:3
    }
}