前言
截止本文antd@5.12.5,
通过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>
)