CSS IN JS

一、组件样式覆盖问题

• 在Layout组件的index.scss中添加样式

.navBar {
  background-color: pink;
}

• 在Home组件中的样式也跟着发生了改变，说明组件中的样式是相互影响的。
• 原因：在配置路由时，Layout和 Home 组件都被导入到项目中，那么组件的样式也就被导入到项目中了。如果组件之间样式名称相同，那么一个组件中的样式就会在另一个组件中也生效，从而造成组件之间样式相互覆盖的问题。
• 结论：默认，只要导入了组件，不管组件有没有显示在页面中，组件的样式就会生效。
• 解决方案
  • 手动处理 （起不同的类名）
  • CSS IN JS ： 以js的方式来处理css
  • css不是一门编程语言，css没有所有的局部作用域全局作用域这样的区分。。。css只有全局作用域

二、CSS IN JS

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

• CSS IN JS 的具体实现有 50 多种，比如：React常用（CSS Modules、styled-components）、 Vue常用（<style scoped> 、css modules）等

• 推荐使用：CSS Modules （React脚手架已集成，可直接使用）

三、CSS Modules 的说明

• CSS Modules 通过对 CSS 类名重命名，保证每个类名的唯一性，从而避免样式冲突的问题
• 换句话说：所有类名都具有“局部作用域”，只在当前组件内部生效
• 在 React 脚手架中：文件名、类名、hash（随机）三部分，只需要指定类名即可 BEM
• xxxx.module.css

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

// 类名
.error {}  .red{}
// 生成的类名为：
.NavHeader_error__ax7yz   .NavHead_red_abcdc

四、在项目中使用css Modules

• 创建名为 [name].module.css 的样式文件（React脚手架中的约定，与普通 CSS 作区分）

// 在 CityList 组件中创建的样式文件名称：
index.module.css

• 组件中导入该样式文件（注意语法）

// 在 CityList 组件中导入样式文件：
import styles from './index.module.css'

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

<div className={styles.test}></div>

五、css module的注意点

• 类名最好使用驼峰命名，因为最终类名会生成styles的一个属性

.tabBar {}

styles.tabBar

• 如果没有使用驼峰命名，对于不合法的命名，需要使用[]语法

.tab-bar {}

styles['tab-bar']

• 如果是全局的类名，应该使用:global(.类名)的方式，不然会把全局类名给修改掉

:global(.icon-map) {   }

这样css modules就不会修改掉类名了

六、css module配合sass

• css moudule也可以配合sass来使用，创建名为[name].module.scss

.father {
  .son {
    font-size: 30px;
  }

  :global {
    .son2 {
      font-size: 20px;
    }
  }
}

• 使用css modules解决Login组件样式冲突问题

七、css modules的使用步骤

1. 把index.scss改成index.module.scss

.list {
  background-color: pink;
  color: red;
    :global {
        xxxx
    }
}

2. 导入样式的时候进行修改

- import './index.scss'

+ import styles from './index.module.scss'

3. 使用的时候需要修改

- <div className="list">文章列表组件</div>

+ <div className={styles.list}>文章列表组件</div>