定制皮肤

场景描述

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

实现思路

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;
    }