antd5自定义大屏组件样式

最近在做大屏项目，颜色都是偏蓝的，antd默认的白色主题和黑色主题无法满足我的业务需求，自定义的话antd5有好多token一时摸不着头脑，最终尝试后留下了几个关键token可以达到效果；特意记下来，分享给需要的小伙伴;

Cascader组件效果

DatePicker组件效果

Select组件效果

主题json

export const CustomCascaderTheme = {
    "colorBgContainer": "#2F4261", // 选框背景颜色和取消颜色一体
    "colorBorder": "rgba(255, 255, 255, 0.1)",
    "colorPrimary": "#177DDC",
    "colorPrimaryBorder": "#177DDC",
    "colorPrimaryHover": "#3493EC",
    "colorSplit": 'rgba(255,255,255,0.1)', // 选框背景颜色间隔border
    "colorWhite": "#fff",
    /* 官方文档没有但实际有用的 */
    "colorTextQuaternary": "rgba(255, 255, 255, 0.25)", // 提示文字颜色
    "colorBgElevated": "#11264D", // 选框背景颜色
    "colorPrimaryBg": "rgba(255,255,255, .1)", // 选项文字hover背景
    "colorTextBase": "#fff", // 默认字体颜色
    /* Select 下拉选择, 选中项底色 */
    "controlItemBgActive": "rgba(255,255,255,0.1)",
}

使用

import { ConfigProvider } from 'antd';
import {CustomTheme} from './CustomTheme'
function App() {
    <ConfigProvider theme={{
        token: { ...CustomTheme } 
      }} locale={zhCN}>
      </ConfigProvider>
}