Changing colors of antdesign header

Question

I am trying to change background color of entire header in antdesign. I am not sure but file with defaults should be this https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

I found out that color of header is used here so i changed it to red

Global.less

@import "./vars.less";

@layout-header-background: red;

But its override with another class

Now my question is what is best practice to achieve change of header color.

Answer 1

The background color of the <Header /> can be simply change using JSS or put a class on it:

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

or

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

and in css

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

maybe what are you seeing is the color of the <Menu/> component. You can also modify the color of it using JSS or put a class on it:

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

see sample here