定制皮肤

场景描述

满足业务和品牌上多样化的视觉需求，包括但不限于全局样式（主色、圆角、边框）和指定组件的视觉定制

实现思路

antd 的样式使用了 Less 作为开发语言，并定义了一系列全局/组件的样式变量，可以根据需求进行相应调整。所有样式变量可以在这里找到。

实现步骤

下面以修改全局主色、按钮组件的样式为例说明

1 写less文件

定义一个名为antd-theme.less的文件，文件可以包括两部分内容：变量和样式定义，如下所示。

//公共变量
@primary-color: #0081cc;
@primary-5: #00AAFF;
@primary-color-hover:#00AAFF;
@primary-color-active:#00AAFF;
@border-radius-base: 2px;
@border-color-base: rgba(0, 0, 0, 0.15);
@disabled-bg: rgba(0, 0, 0, 0.04);
@background-color-base:rgba(0, 0, 0, 0.04);
@disabled-color: rgba(0, 0, 0, 0.25);
@text-color: rgba(0, 0, 0, 0.85);
@item-hover-bg: rgba(0, 162, 255, 0.1);
@border-color-split: rgba(0, 0, 0, 0.15);

//Button 
@btn-disable-border: transparent;
@btn-border-radius-base: 4px;

.ant-btn {
    padding: 4px 16px;;
}
.ant-btn.ant-btn-icon-only{
    padding: 2.4px 0;
}
.ant-btn-sm{
    padding: 0 7px;
}
.ant-btn:hover {
    color: #00AAFF;
    border-color: #00AAFF;
}
.ant-btn.ant-btn-primary:hover {
    color: #ffffff;
    border-color: #00AAFF;
    background: #00AAFF;
}
.ant-btn.ant-btn-link:hover {
    color: #00AAFF;
    border-color: transparent;
}
.ant-btn.ant-btn-primary.ant-btn-dangerous:hover {
    color: #fff;
    border-color: #ff7875;
    background: #ff7875;
}
.ant-btn.ant-btn-dangerous:hover {
    color: #ff7875;
    border-color: #ff7875;
    background: #fff;
}