CSS Modules

组件之间样式覆盖问题

• 能够利用CSS Modules解决组件之间样式覆盖的问题

概念

• 问题：CityList组件的样式，会影响Map组件的样式
• 原因：在配置路由的时候，CityList组件与Map组件都会被导入到路由中，那么只要组件被导入，那么相关的样式也会被导入进来，如果两个组件的样式名称相同，那么就会影响另外一个组件的样式
• 小结：默认情况下，只要导入了组件，不管组件有没有显示在页面中，组件的样式就会生效
• 解决方式
  • 写不同的类名
  • CSS IN JS

CSS IN JS

CSS IN JS 是使用JavaScript 编写 CSS 的统称，用来解决CSS样式冲突，覆盖等问题；

CSS IN JS 的具体实现有50多种，比如：CSS Modules、styled-components等

推荐使用：CSS Modules（React脚手架已经集成进来了，可以直接使用）

CSS Modules

概念

• CSS Modules 通过对CSS类名重命名，保证每一个类名的唯一性，从而避免样式冲突问题
• 实现方式：webpack的css-loader 插件
• 命名采用：BEM（Block块、Element元素、Modifier三部分组成）命名规范。比如： .list_item_active
• 在React脚手架中演化成：文件名、类名、hash（随机）三部分，只需要指定类名即可

/* 自动生成的类名，我们只需要提供 classname 即可 */
[filename]_[classname]__[hash]

// 类名
.error {}
// 生成的类名为：
.Button_error__ax7yz

使用

-1 创建名为[name].module.css 的样式文件（React脚手架中的约定，与普通CSS区分开）
// 在 CityList 组件中创建的样式文件名称：
index.module.css

2. 组件中导入该样式文件（注意语法）
   // 在 CityList 组件中导入样式文件：
   import styles from './index.module.css'

3. 通过 styles 对象访问对象中的样式名来设置样式

1. 在 NavHeader 目录中创建名为 index.module.css 的样式文件。

2. 在样式文件中修改当前组件的样式（使用单个类名设置样式，不使用嵌套样式）。

3. 对于组件库中已经有的全局样式（比如：.am-navbar-title），需要使用 :global() 来指定。

   // OK
   .navBar {}
   // 不推荐嵌套
   .navbar .test {}

   :global(.am-navbar-title) { color: #333; }
   .root :global(.am-navbar-title) {}

示例demo
.navbar {
color: #333;
background-color: #f6f5f6;
}

.navbar :global(.am-navbar-title) {
    color: #333;
}
.map {
    height: 100%;
    padding-top: 45px;
}

页面结构

地图