hover边框

[transtone]

在 antdv-v3 的官方示例中， link button 的 hover 状态是没有边框的，但demo中却有，是不是哪里没有处理到位？

[GitOfZGT]

因为选择器顺序导致权重问题

正常顺序是这样的

.ant-btn:hover, .ant-btn:focus {
    color: #A446B6;
    background: #fff;
    border-color: #A446B6;
}
.ant-btn-link:hover, .ant-btn-link:focus, .ant-btn-link:active {
    border-color: transparent;
}
.ant-btn-link:hover {
    background: transparent;
}
.ant-btn-link:hover, .ant-btn-link:focus {
    background: transparent;
}

当由less变量转化的属性值，会抽取出来独立到一个style

/*原css*/
.ant-btn-link:hover, .ant-btn-link:focus, .ant-btn-link:active {
    border-color: transparent;
}
.ant-btn-link:hover {
    background: transparent;
}
.ant-btn-link:hover, .ant-btn-link:focus {
    background: transparent;
}

/*主题css*/
.ant-btn:hover, .ant-btn:focus {
    color: #A446B6;
    background: #fff;
    border-color: #A446B6;
}

主题css会在原css之后，所以相同权重的选择器，排在后面的权重就优先了

可以使用 includeStyleWithColors 解决

 themePreprocessorPlugin({
      less: {
        // css中不是由主题色变量生成的颜色，也让它抽取到主题css内，可以提高权重
        includeStyleWithColors: [
          {
            // color也可以是array，如 ["#ffffff","#000"]
            color: "#ffffff",
            // 排除属性，如 不提取背景色的#ffffff
            // excludeCssProps:["background","background-color"]
            // 排除选择器，如 不提取以下选择器的 #ffffff
            // excludeSelectors: [
            //   ".ant-btn-link:hover, .ant-btn-link:focus, .ant-btn-link:active",
            // ],
          },
          {
            // @zougt/some-loader-utils v1.4.2 支持 "transparent" 、"none" 等等
            color: "transparent",
            // excludeSelectors: [
            //   ".ant-btn-link:hover, .ant-btn-link:focus, .ant-btn-link:active",
            // ],
          },
        ],
      },
    })