情景描述
情景一：
- 项目中大量的使用ant-design组件，它包含一些base样式，比如颜色、字体等等。
- 但是你的项目可能有自己的主题，因此需要改变主题（比如项目的基本色调是红色因此需要将antd中有颜色的部分变成红色）
情景二：
- 虽然全局主题被改成了项目需要的样子
- 但是有可能恰巧只有你的组件需要颜色跟别的组件不同
- 这时候就需要单独的在你的组件中覆盖antd的样式
解决修改主题的问题
按照官网的介绍：有两种方式可以修改主题我们项目只使用的第二种方式
- 首先建立一个单独的less文件
self.less定义自己的主题 - 然后建立另一个less文件
ant-theme.less将原生的antd以及self.less引入@import "~antd/dist/antd.less"; // 引入官方提供的 less 样式入口文件 @import "your-theme-file.less"; // 用于覆盖上面定义的变量 - 最后将
ant-theme.less引入webpack入口文件- Q1:为什么要将antd的less样式放到入口文件引入？
- A1:因为如果想要使用antd的组件处理引入组件还需要引入其less样式，在入口文件引入所有的antd的less样式都会被打包，就不需要在每个单独的conatienr中引入了less样式
解决改写antd Component样式（全局）
- 查看antdless的定义发现
- 最外层的index.less包含两个部分
- 通用主题的定义（全局都要使用的样式）
- 组件的定义
- 最外层的index.less包含两个部分
- 我们的项目也建立了styles目录其中包含了全局样式和单独对antd component样式的复写
- 为每个组件创建一个scss文件复写样式
- 然后引入index.scss中最后引入webpack入口文件
//index.scss @import "base/index.scss" @import "components/index.scss"//components/index.scss @import "layout"; @import "buttons"; @import "select"; @import "tab"; @import "inputs"; @import "form"; @import "joyride"; @import "modal";//base/index.scss @import "variables"; @import "base";
解决改写antd Component在某个组件中的样式（仅仅某一个conatiner需要修改样式）
- 前提：项目中使用css module，因此所有定义在index.module.scss文件的样式全部都会改名（常常遇到无法覆盖样式的原因大部分归结于此）
- 重点：想要覆盖antd的样式就要通过同名class重写样式
- 因此：保证找打你想要修改的样式的正确的classname
- 使用使用这个classname重写样式的时候类名绝对不会被修改（一旦修改就无法匹配到antd的对应class）
- 方法：同样也是在index.module.scss中写类名定义但是要写成如下的样子：
:global { .ant-calendar-input-wrap{ font-size: 14px; height: 45px; padding-left:12px; line-height: 45px; } }
