Customizing the colors of an Ant Design header

Question

I am currently attempting to modify the background color of the entire header in antdesign. I believe the file containing the default settings can be found here: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

Upon inspecting this file, I have identified where the header color is defined and successfully changed it to red.

In the Global.less file:

@import "./vars.less";

@layout-header-background: red;

However, I have noticed that this change is being overridden by another class

My main query now is what would be considered the best practice for achieving a successful modification of the header color.

Answer 1

Answer №1

To change the background color of the <Header />, you can use JSS or apply a class to it:

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

Alternatively,

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

In your CSS file, you can define the following:

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

If you are seeing the color of the <Menu/> component instead, you can modify its color using JSS or by adding a class:

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

You can view a sample here:

Answer 2

To change the background color of the <Header />, you can use JSS or apply a class to it:

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

Alternatively,

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

In your CSS file, you can define the following:

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

If you are seeing the color of the <Menu/> component instead, you can modify its color using JSS or by adding a class:

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

You can view a sample here: