覆盖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模块保证了其中定义的所有样式的名字都不会被修改

推荐阅读更多精彩内容