and

情景描述

情景一：

• 项目中大量的使用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在某个组件中的样式（仅仅某一个conatiner需要修改样式）

• 前提：项目中使用css module，因此所有定义在index.module.scss文件的样式全部都会改名（常常遇到无法覆盖样式的原因大部分归结于此）
• 重点：想要覆盖antd的样式就要通过同名class重写样式
• 因此：保证找打你想要修改的样式的正确的classname
  • 使用使用这个classname重写样式的时候类名绝对不会被修改（一旦修改就无法匹配到antd的对应class）
• 方法：同样也是在index.module.scss中写类名定义但是要写成如下的样子：

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

  :global {
    .ant-calendar-input-wrap{
      font-size: 14px;
      height: 45px;
      padding-left:12px;
      line-height: 45px;
    }
  }

antd-vue

覆盖antd样式解决办法有两个：

1.在一个组件中同时使用有作用域和无作用域的样式

当 <style>标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

vue组件编译后，会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局。

2.深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，

例如影响子组件，你可以使用 >>> 操作符：只作用于css;

<style scoped>
 .a >>> .b { /* ... */ }
</style>

如果是sass/less的话可能无法识别，这时候需要使用 /deep/ 选择器了

/deep/ .class2{
 font-size:20px; //对所有子组件生效.
 .class3{   }  //没有必要写多层deep 父类有deep后子类自动也会深度选择 并且这么写在firfox里会失效
}

但是sass中使用/deep/没问题，在scss中使用/deep/报错了。

找到vue官网关于深度选择器是这样说的：有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

于是用 ::v-deep 就可以了