项目开发前准备

和设计沟通UI，尽量样式风格统一，有利于做全局样式。

全局样式实现方案选择，选择时要考虑全局样式是否会污染到其他项目，开发成本等问题。

样式统一方案

方案一： 配置theme字段

参考文档4x.ant.design/docs/react/…

项目根目录的 .umirc.ts 或 config/config.ts 文件中 theme 字段进行主题配置。theme 可以配置为一个对象或文件路径。推荐使用文件路径，因为要配置很多样式，单独一个文件抽出来比较优雅。

如：

"theme": {
  "primary-color": "#1DA57A",
},

所有的样式变量github.com/ant-design/…

这样配置完，所有的antd组件都按照上面配置的样式展示

方案二： global

在 Less 中，:global 是用来定义一个全局 CSS 类名的关键字，它的作用是可以让一个类名不受 CSS 模块化的限制，可以在整个应用范围内全局使用。

在使用 CSS 模块化的情况下，每个 CSS 文件都有自己的命名空间，同一个类名在不同文件中被声明时会被自动转换为不同的类名。这种机制能够避免不同 CSS 文件中的类名相互干扰，但也会限制全局样式在整个应用中使用的能力。

通过在 Less 中使用:global，您可以阻止对应的类名被转换成局部类名，同时将其变为全局类名，这样就可以在整个应用的任何地方使用这个类名。

例如，在 Less 文件中，您可以这样定义一个全局类名：

:global {
  .my-global-class {
    color: red;
    background-color: green;
  }
}

在编译成 CSS 后，.my-global-class 不再具有模块化的特性，它可以像普通的全局类一样被应用到应用中的任何组件中：

.my-global-class {
  color: red;
  background-color: green;
}

在实际项目中全局样式可以如下实现：

1. 在项目html结构中选择离根节点比较近的节点增加一个类名（可以以项目名称命名，要保证唯一性，具体在哪个节点加类名要结合项目考虑），下面代码中的'projectName'是你定义的唯一标识
2. 引入样式文件如：

:global{
  .projectName{
    .ant-btn-primary{
      color: #fff;
      background-color: #165dff;
    }
  }
}

这样这个项目中所有primary类型的antd按钮样式就被修改了，

其他：

1. 如antd的Modal组件是挂载在body下的，所以想要统一修改的样式在Modal中也生效的话，使用Modal组件时要加一个类名，如下：

<Moadl className='projectName'></Moadl>

2. 同是按钮，在表格中和其他地方样式不一样，这种情况可以这么写，其他类似情况可以用同样的方式实现

:global{
  .projectName{
    .ant-table {
      .ant-btn-primary{
        color: #fff;
        background-color: #165dff;
      }
    }
  }
}

是吧，只有表格下的按钮才会有这种样式

方案三：antd组件二次封装（套壳）

例如将Button组件封装成MyButton组件，在MyButton组件中再写一层样式，后续项目中的按钮都引用Mybutton，这样按钮样式就统一了

三种方案的对比和实践中给我的感觉

第一种方案：比较规范，比较推荐，不过成本上需要熟悉一千行的配置项（github.com/ant-design/…），还有和设计师沟通（不管哪种方案都要和设计师沟通，做好样式风格统一）；

第二种方案：落地起来最方便，理解成本也低；

第三种方案：开发成本较高，适合会对开发组件库进行二次开发的团队。