Reactjs Antd V5组件自定义主题

发布于10月11日

我需要我的原色是一种特殊的绿色

更新令牌属性后，我仍然拥有不同的组件，如布局和菜单，默认 colored颜色设置为#001529

为什么？

示例:规则

:where(.css-dev-only-do-not-override-154n70z).ant-layout .ant-layout-sider {
    position: relative;
    min-width: 0;
    background: #001529;
    transition: all 0.2s,background 0s;
}

代码片段:

<ConfigProvider
  theme={{
    token: {
      // Seed Token
      colorPrimary: '#1bb470',
      colorInfo: '#1bb470',
      fontFamily: 'Lato, sans-serif',
    },
    components: {
      Layout: {
        colorBgHeader: '#fff',
      },
      Menu: {
        colorItemBg: '#fff', // colorBgBase -3% lightness
        colorSubItemBg: '#fff', // colorBgBase -3% lightness
      },
    },
  }}
>

推荐答案

要更改Sider种 colored颜色，只需在Layout样式配置中添加siderBg个props ，然后更改Menu种 colored颜色，然后添加darkItemBg:

<ConfigProvider
  theme={{
    token: {
      ....
    },
    components: {
      Layout: {
        siderBg: "red" // add this
        ...          
      },
      Menu: {
        darkItemBg: "blue" // add this
        ...
      }
    }
  }}
>

Here是一个正常工作的代码和方框示例.

您可以在每个组件页面末尾的第# Design Token节中找到所有可配置令牌样式设置的列表: