如何通过Antd ConfigProvider修改Layout Content的背景色？

可以通过Ant Design主题配置中的colorBgContent变量，在ConfigProvider里全局统一设置Layout Content的背景色，无需在每个组件中单独修改。

修改后的ConfigProvider代码如下：

<ConfigProvider
    theme={{
      components: {
        Layout: {
          colorBgHeader: '#fff',
          colorBgContent: '#fff' // 新增配置Content背景色
        }
      }
    }}
>
    <App />
</ConfigProvider>

说明： #

Ant Design的Layout组件针对不同内置区域提供了专属主题变量：

• colorBgHeader 对应Header区域的背景色
• colorBgContent 对应Content区域的背景色
• colorBgSider 对应Sider区域的背景色

配置完成后，项目中所有Layout.Content组件都会自动继承这个背景色设置。

如果需要添加额外通用样式（比如你之前用styled-components实现的margin: 5px），可以选择两种方式：

• 封装全局统一的StyledContent组件在项目中复用
• 在全局样式文件中设置通用规则：

.ant-layout-content {
  margin: 5px;
}

内容的提问来源于stack exchange，提问作者xFlame