dva-cssModule

1. css 模块化
2. 有自己的作用域
   1. React中的CSS没有域的概念，是全局的样式
3. 为每个组件创建一个单一的 .scss文件，并在入口引入相应的样式文件，这些样式也是全局的
   1. 生成唯一的 class类名，降低项目中样式覆盖
4. cssModules
   1. https://github.com/css-modules/css-modules
   2. react-css-modules 通过高阶组件的形式来避免重复输入 style.**

dva-cli 默认开启了css-modules
CSS-modules通过将样式编写成哈希字符串的方式让其变得独一无二。这样就相当于产生了一个局部作用域

import ‘./index.less’

import './index.less' // 造成全局样式污染，重名的会被覆盖

import ‘./index.less’ -> import styled from ‘./index.module.less’

import styles from "./style.css";
// import { className } from "./style.css";
console.log(styles)
<a styleName={aa}>Context</a>
// index.js & index.module.scss
import styles from './index.module.scss';
<Table
  loading={loading}
  dataSource={tbody}
  className={styles.table}
/>
<header className={styles.title}>
  <span className={styles.desc}>{value}</span>
</header>
<Link className={styles.link} to="/detail">
<Pagination className={styles.pagination} />
// index.module.scss
.table {
  min-height: 500px;
  :global {
    .header {
      table th {
        background: #ccc;
      }
    }
  }
}
.link {
  margin: 0 5px;
  color: rgba(49, 128, 253, 0.65);
  text-decoration: none;
  cursor: pointer;
  &:link,
  &:visited {
    color: rgba(49, 128, 253, 0.65);
  }
}
.pagination {
  margin: 20px 0;
  text-align: center;
}

css样式管理

1. style行内样式
2. css-in-js，css 模块化
   1. styled-components
3. css Module
   1. 解决命名冲突和样式覆盖
   2. 不污染全局

:global

:global(.classname) {}
:global {
  .classname {}
}

css Modules

1. create-react-app 默认具备 css Module功能
2. 创建 .css 文件需要 [name].module.css 格式创建
3. class类名是随机的 hash值
4. cssModule不是标准，是webpack在构建过程中，对 css类名，动态编译成唯一的 hash字符串

默认和全局样式

.normal {
  color: green;
}
/* 以上与下面等价*/
:local(.normal) {
   color: green;
}
/* 定义全局样式*/
:global(.btn) {
   color: red;
}

/src/Button
    /Button.js // jsx组件
    /Button.module.css // css样式
// Button.js
import React from 'react'
import styled from './Button.module.css'
export default function Button () {
    return <div className={styled.button}></div>
    // 编译结果 <div class="Button_button__oL_Ua" role="button"></div>
}
// Buttom.module.css
.button {
    --primary: #f90;
    --color: #fff;
    margin: 10px;
    background-color: var(--primary);
    color: var(--color);
}

webpack 配置 cssModule

1. eject暴露 webpack配置，找 webpack.confog.js ```jsx npm run eject /config/webpack.config.js, 找到 test:cssRegex

{ test: cssRegex, exclude:cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, modules: true, sourceMap: isEnvProduction && shouldUseSourceMap }) } ```