Is it possible to change the background color of a MUI theme in ReactJS by using Css

Currently, I am utilizing Material UI to create a theme that is functioning correctly. However, upon adding <CssBaseline/> to the App.js file, it unexpectedly changes the background color to white instead of the intended #1f262a specified in the index.css. In an attempt to rectify this issue, I included the following code snippet within the theme:


  overrides: {
    CssBaseline: {
      "@global": {
        body: {
          backgroundColor: "#1f262a",
        }
      }
    }
  },

Unfortunately, despite these efforts, the background color remains unchanged. Any insights or solutions would be greatly appreciated.

javascriptcssreactjsmaterial-ui

Answer №1

Consider replacing CssBaseline with MuiCssBaseline:

  customStyles: {
    MuiCssBaseline: {
      "@global": {
        body: {
          background-color: "#1f262a",
        }
      }
    }
  }

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

Encountering a Vue syntax error following the binding of a session variable

Encountering a syntax error while attempting to bind a session variable as a prop of my Vue component. Scrutinizing my code did not reveal any mistakes, but perhaps another set of eyes may catch something. This is where I have registered my components: V ...

javascriptlaravelvue.jsvuejs2

What is the best way to generate hyperlinks from data in a MongoDB database?

Looking for some assistance in setting up an online discussion forum using node.js, express & mongodb. My current challenge is creating clickable links that will redirect me to the specific page of each article stored in the database. I need to figure out ...

javascriptnode.jsmongodbexpressejs

The input value remains a string even after it has been converted to a float

I can't figure out where I'm going wrong. I'm attempting a simple task: getting user input, converting it to a float, and performing a calculation with that value. However, all I keep getting is NaN. Here's the input (I normally replac ...

javascriptjquery

Unable to populate an array with a JSON object using Angular framework

Here is the JSON object I have: Object { JP: "JAPAN", PAK: "PAKISTAN", IND: "INDIA", AUS: "AUSTRALIA" } This JSON data was retrieved as a response from an HTTP GET request using HttpClient in Angular. Now, I want to populate this data into the following ...

javascriptarraysjsonangulartypescript

Error message: Unable to access the state property of an undefined object

I've been attempting to integrate a react sticky header into my stepper component. However, I've encountered an issue where it doesn't render when added inside my App.js file. As a result, I've started debugging the code within App.js ...

javascripthtmlreactjsreduxmaterial-ui

Navigate down the page until you reach the section that is set to display as a block

Is it possible to make the page automatically scroll to a specific element located in the middle of the page when changing its display property from none to block? ...

jquerycss

What could be the reason behind the improper display of JavaScript for ID overlay2?

Why is it that when I try to have two overlays with different messages display upon clicking buttons, they both end up showing the same message? Even after changing the ID tag names, the issue persists. Can someone shed some light on what might be causin ...

javascriptjqueryhtmlcss

Save the retrieved data in a variable and pass the entire JSON object as a prop to a React component

Having some trouble with my code. I need the app to fetch a JSON from an API and pass it as a prop so that each component file can use it and display the element on the screen. The issue is, I can't seem to figure out how to store the fetched informa ...

javascriptreactjsjsonfetch-api

A single element containing two duplicates of identical services

I am encountering an issue with my query builder service in a component where I need to use it twice. Despite trying to inject the service twice, it seems that they just reference each other instead of functioning independently, as shown below: @Component( ...

javascriptangulartypescript

Change HTML table information into an array with the help of JavaScript

I am facing an issue where the array is displaying as undefined even though I am storing table data in an array. Check out more about arrays here. Attempting to retrieve each problem's row in the form of an array function getAllProblemRowElements() ...

javascript

WebStorm displays all imported items as unused in a TypeScript backend project

https://i.stack.imgur.com/J0yZw.png It appears that the image does not display correctly for files with a .ts extension. Additionally, in .tsx files, it still does not work. In other projects using WebStorm, everything works fine, but those projects are o ...

javascripttypescriptexpressnestjswebstorm

What is the best way to refresh flexslider after it has been updated via AJAX?

At first, my slider is functional upon loading the page. However, after making an ajax call and receiving new slides to populate the slider, it becomes deactivated (as expected) https://i.sstatic.net/LC0yG.png Is there a method to reinitialize the flexsl ...

javascriptjqueryajaxflexslider

What is the reason behind Typescript flagging a potential undefined value when checking for array length using a greater than comparison but not with an

Consider the following excerpt from a React component: const AccountInformation = (props: { readonly accountData: AccountData | undefined | null }) => { const hasMultipleAccounts: boolean = props.accountData?.customerAccounts?.length === 1 ? false : t ...

javascriptreactjstypescript

Switching measurement unit to jQuery when retrieving image weight

After coming across a solution on this question, I am looking to determine the weight of an image from a file input. The solution I found displays the result in MiB (Mebibyte) unit. Is there a way to show the image weight using the same code, but in a diff ...

javascriptphpjqueryimage-processing

Develop a versatile currency symbol mixin that can be used in various small text formats

I am currently working on a website where I need to display prices in multiple locations. To achieve this, I have created a sass mixin that is designed to add the desired currency symbol before the price with a smaller font-size. Below are examples of how ...

csssassalignmentcurrencyscss-mixins

The where clause in the Typeorm query builder instance is not functioning properly after its common usage

When fetching data for my relations, I opted to use QueryBuilder. In order to validate certain get request parameters before the index, I established a common QueryBuilder instance as shown below. // Common Get Query const result = await this.reserva ...

javascripttypescriptpostgresqltypeormquery-builder

What is the correct way to import React's experimental hooks?

I am eager to explore the cutting-edge and unreleased features of React, particularly the "useEffectEvent" hook. However, I have encountered a problem while trying to import this specific feature from the React package. Whenever I attempt to import somet ...

reactjsnpm

When the function is clicked, an error occurs that says: "return is a reserved word"

I am attempting to trigger a popup window when clicking on the link button, but I keep getting an error stating that "return" is a keyword and expecting an identifier. I'm using ASP.NET for this functionality. <asp:LinkButton ID="CommentAction" h ...

javascript

Facing Issues with User.update in Mongoose and MongoDB

I have been struggling to create a new collection and push it into a specific user's collections array. Despite researching various stackoverflow posts, I am unable to achieve this using either User.update() or User.findOneAndUpdate(). I can confirm t ...

javascriptmongodbexpressmongoosemongoose-schema

Ways to automatically refresh HTML table in Django framework

How can I dynamically update the search content under the hostname column in an HTML table? The search content needs to be updated every time, and the row number should increase according to the number of hostnames entered by the user. Below is my index.h ...

javascriptpythonhtmldjangoajax