英文:
Antd - is there any way to change Content background color with ConfigProvider?
问题
我尝试使用ConfigProvider将内容背景颜色更改为白色，以便不必在每个组件中更改背景颜色。我找到了Header和Sider的解决方案，但Content给我带来了一些问题。是否有任何魔法解决方案？
以下是主索引文件中的ConfigProvider：
<ConfigProvider
theme={{
components: {
Layout: {
colorBgHeader: '#fff'
}
}
}}
>
<App />
</ConfigProvider>
对我来说唯一有效的更改组件中背景的方法是手动更改它（我在使用styled-components）：
import styled from 'styled-components';
import { Layout } from 'antd';
const { Content } = Layout;
export const StyledContent = styled(Content)`
margin: 5px;
background: ${({ theme }) => theme.colors.white};
`;
英文:
i'm trying to make Content background color change to white with ConfigProvider, so i don't have to change background color in every component. I found solution for Header and Sider, but Content is giving me a little problems. Is there any magic solution for that?
Here's ConfigProvider in main index file.
<ConfigProvider
theme={{
components: {
Layout: {
colorBgHeader: '#fff'
}
}
}}
>
<App />
</ConfigProvider>
The only way that works for me to change background in Component is to change it manually (i'm using styled-components)
import styled from 'styled-components'
import { Layout } from 'antd';
const { Content } = Layout;
export const StyledContent = styled(Content)`
margin: 5px;
background: ${({ theme }) => theme.colors.white};
`;
答案1
得分: 1
第一种方法
您可以添加className，并在您的scss文件中全局定义它，然后您可以进行更改。
第二种方法
您可以为header定义背景颜色，并为body定义背景颜色，它将自动应用于content。
<ConfigProvider
theme={{
components: {
Layout: {
colorBgHeader: "black",
colorBgBody: "skyblue"
}
}
}}
>
Codesandbox: https://codesandbox.io/s/mutable-browser-w1tt72?file=/src/App.js
英文:
There is two way to do that
1st way
You can add className and globally define that into your scss file and you can change it.
2nd way
You can define the background color for header and define the background color for body and it will automatically apply into content.
<ConfigProvider
theme={{
components: {
Layout: {
colorBgHeader: "black",
colorBgBody: "skyblue"
}
}
}}
>
Codesandbox: https://codesandbox.io/s/mutable-browser-w1tt72?file=/src/App.js
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论