antd5 Layout中Header与Sider背景色注入

前言

截止本文[email protected]，
通过ConfigProvider的方式统一修改主题色，
会出现Sider与Header无法修改背景色的问题。

这种行为与官方提供的theme-editor中展示的样式并不一致。

https://ant-design.antgroup.com/theme-editor-cn

在theme-editor中，使用 theme.darkAlgorithm 算法，默认状态下获得的背景色应该是#000。

问题定位

这是因为源代码中Header 与 Sider 使用的token没有作动态注入处理。
而是采用写死的字面量颜色。

headerBg: '#001529'
siderBg: '#001529'

顺便一提, Content和Footer没有这个问题，
因为两者都使用colorBgLayout这一 map token，
分别映射至两个 alias token : bodyBg 与 footerBg 。

不知道为什么Header 与 Sider 这两个属性不做动态化处理。
考虑了一下感觉又可能不是bug，因为确实没有更多好用的map token可以用了。
如果复用colorBgLayout容易出现样式重叠，分不清。
感觉是antd现在划分的Layout层级不够多。

解法

官方文档没有讲的太详细。
但稍微摸索一下就能得到答案。

在index.jsx或者任何一个你想局部注入的位置。

import { ConfigProvider, theme } from 'antd'


return (
<ConfigProvider
    theme={{
      components: {
        Layout: {
          siderBg: '#000',
          headerBg: '#555'
        }
      },
      algorithm: [theme.darkAlgorithm]
    }}
  >
  <Myapp />
</ConfigProvider>
)