男胖友de部落格

覆盖antdv的默认样式

· nanpangyou

在使用ant-design-vue时。

当默认样式不满足需求的时候,需要覆盖默认的样式,又不希望影响全局

  1. vue.config.js中配置
module.exports = {
    css: {
        loaderOptions: {
            // 向 CSS 相关的 loader 传递选项 
            less: {
                lessOptions: {
                    javascriptEnabled: true
                }
            }
        }

    }
}
  1. 在组件中。如果是less。则只需要在需要的选择器下添加对应的样式 如:
.filter-option {
    /deep/ .ant-radio-button-wrapper {
      z-index: 1;
      color: #4a50d9;
    }
    /deep/.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
      background: #4a50d9;
      color: rgba(255, 255, 255, 0.8);
    }
    /deep/.ant-radio-button-wrapper:not(:first-child)::before {
      background: transparent;
    }