Customizing the colors of an Ant Design header

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.

https://i.sstatic.net/hr4tP.png

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 https://i.sstatic.net/aA0So.png

My main query now is what would be considered the best practice for achieving a successful modification of the header color. https://i.sstatic.net/qcrvQ.png

cssreactjsnext.jslessantd

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:

https://codesandbox.io/s/header-content-footer-antd4131-forked-stiw3

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The React functional component fails to update when triggered by a parent component's setState method

My React component is utilizing apollo to fetch data through graphql class PopUpForm extends React.Component { constructor () { super() this.state = { shoptitle: "UpdateMe", popupbodyDesc: "UpdateMe" } } re ...

javascriptreactjsreact-hooksapollo

organize the values based on their priority using reactjs

I'm facing a challenge involving two arrays of objects: array1 and array2. I need to display only three values from both arrays, with priority given to array1. The requirements are as follows: if array1 contains 3 elements, all three should be shown. ...

javascriptarraysreactjstypescript

Is there a way to format this into four columns within a single row while ensuring it is responsive?

I am working on a layout with a Grid and Card, aiming to have 4 columns in one row. However, the 4th column ends up in the 2nd row instead, as shown below: https://i.sstatic.net/gOeMm.png My goal is to align all 4 columns in a single row. Additionally, w ...

javascriptreactjsmaterial-ui

What are the steps to ensure a React component stays updated with data from the back-end?

I have a project underway where several users can work together on an application concurrently. When one user makes changes to the database, how can I automatically update the component for all other users? Would it be efficient to create a function that ...

reactjsfrontend

Spotting the Visible Element; Detecting the Element in

Currently, my webpage has a fixed header and I am facing the challenge of dynamically changing the styling of the li elements within the navigation based on the user's scrolling position. To achieve this, I believe the most effective approach would b ...

javascriptjqueryhtmlcss

The font-weight property appears to be ineffective across all browsers

I'm struggling with the font-weight property in my CSS. Despite trying different values like lighter, bold, and even numerical values like 300, it doesn't seem to have any effect on the font weight in any browser. I am using the following code to ...

css

Tips for creating a custom hook that is type safe:

When I use the custom function createUser, I've noticed that I can pass numbers instead of strings without receiving an error. Surprisingly, even if I forget to include an argument, no red squiggles appear. const [userState, createUser] = useCre ...

reactjstypescript

Mastering file/image transfer between a React frontend and a node.js backend

I need assistance with sending a file/image from React to a node.js server using multer. However, I am encountering an issue where I can only successfully send an image through Postman. When attempting the same process in React, I receive the following e ...

node.jsreactjsexpresspostman

Preventing the Last Image from Sliding on a Bootstrap 5 Carousel in a ReactJS Project

I need help with stopping the slide at the last image in a React JS project using JavaScript. I want to modify my Slider code to remove the next and prev icons, and also halt the slider when it reaches the IMG src={slider5}. Can someone guide me on how t ...

reactjscarouselbootstrap-5

Inject a snippet of temporary code at the end of the CSS file using JavaScript or JQuery

I am looking to dynamically add temporary CSS code to the end of an external CSS file or modify it using JavaScript or jQuery. For example, let's say my mystyle.css file looks like this: //mystyle.css p{color:red} Now, when a user interacts with the ...

javascriptjquerycss

Issue: Unable to load the file named 'script.ts' while employing chrome.scripting.executeScript

Currently, I am working on developing a chrome extension using Vite with React and Typescript along with CRXJS. This is my initial project in this domain. The issue I am encountering is related to executing a script on the current tab when a button is clic ...

reactjstypescriptgoogle-chrome-extensionvite

What is the best method to generate polar charts using highcharts-react-official?

I'm having trouble creating a polar chart using the HighchartsReact wrapper in my project. Instead of getting the desired result, I either end up with a regular line chart or run into errors. Can anyone help me understand how to utilize the highcharts ...

reactjshighcharts

What is the best way to ensure my background image adjusts properly for both iPhones and Android devices to be responsive?

I have set the background image in my CSS to fit perfectly without any need for adjustments. The goal is for the image to resize itself when viewed on mobile devices or tablets. .intro { display: table; width: 100%; height: auto; padding: ...

htmlcssiphoneresponsive-design

Configure UL element as a dropdown on mobile devices and expand it to full width on desktop screens

Circumstances This HTML code is intended to create a horizontal <ul> element that spans the entire width of the <div class="list__wrapper"> container on desktop screens with a minimum width of 1024px. However, for mobile devices with a maximum ...

jqueryhtmlcsshtml-lists

The most effective method for integrating a Next.js application into a separate website

In my current project, I am working on a Next.js app that utilizes app-directory and server-side rendering. The challenge presented to me is to develop a white-label version of the app for third-party websites to host. Initially, I thought using Iframe w ...

next.jsnext.js13

How to retrieve nested menu items within the scope by utilizing JSON and AngularJS

I have recently started working with angular and am facing difficulty in accessing the submenu items within my angular application. While I can successfully access the top level menu items, I am struggling to retrieve the second level items. Here is a sni ...

javascripthtmlcssangularjsjson

What could be causing the video to extend beyond the limits of the container?

When extending the result window, the video ends up overlapping the section below it. I am looking to keep the video within the confines of the section's height, which is set to height:100vh. Is there a way to accomplish this? Check out this jsFiddl ...

htmlcss

When using react-router-dom, a blank page is displayed after refreshing the browser

My coding challenges Main.js import React from "react"; import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; function Main() { return ( <Router> <Switch> <Route path="/&quo ...

reactjsreact-routerreact-router-dom

Ways to eliminate the navigation button on an HTML5 video player

I'm having a great experience using the HTML5 video player to continuously play videos. However, I have noticed that when my mouse cursor hovers over the video, a navigation button appears at the end of the screen. I would like to either remove or hid ...

csshtmlvideo

Updating the CSS properties of a specific element within a dynamically generated JavaScript list

So I'm working on a JavaScript project that involves creating a navigation bar with multiple lists. My goal is to use the last list element in the bar to control the visibility (opacity) of another element. So far, I have been using the following code ...

javascriptjqueryhtmlcss