CODEWITHSUNDEEP
cssreactjsnext.jslessantd
user9817924
user9817924

Reputation:

Changing colors of antdesign header

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

antd defaults

Global.less

@import "./vars.less";

@layout-header-background: red;

But its override with another class enter image description here

Now my question is what is best practice to achieve change of header color. I mean this thing here

Upvotes: 2

Views: 12524

Answers (1)

Chanandrei
Chanandrei

Reputation: 2421

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

Edit

Upvotes: 4

Related Questions