覆盖ant-design的样式

情景描述

情景一：

• 项目中大量的使用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包含两个部分
    • 通用主题的定义（全局都要使用的样式）
    • 组件的定义
• 我们的项目也建立了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;
      }
    }
  
  

global模块保证了其中定义的所有样式的名字都不会被修改