改变 antdesign 的颜色 header

Question

我正在尝试更改 antdesign 中整个 header 的背景颜色。我不确定，但默认文件应该是 https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

我发现这里用的是header的颜色所以我把它改成了红色

Global.less

@import "./vars.less";

@layout-header-background: red;

但它会被另一个覆盖 class

现在我的问题是实现 header 颜色变化的最佳做法是什么。

Answer 1

<Header /> 的背景颜色可以简单地使用 JSS 更改或在其上放置 class:

<Header style={{backgroundColor: "red"}}>...</Header>

或

<Header className="red-header">...</Header>

并在 css

.red-header{
    background-color: red;
}

也许您看到的是 <Menu/> 组件的颜色。您还可以使用 JSS 修改它的颜色或在其上放置 class:

<Menu style={{backgroundColor: "red"}} mode="horizontal">...</Menu>

在此处查看示例

Changing colors of antdesign header