Why are my custom material UI styles not showing up after the deployment?

I was attempting to customize a material UI element, specifically trying to increase the size of the icon.

Below is the style code I used:

export const Icon = styled(Box)({
    color: "gray",
    position: "relative",

    "& .css-i4bv87-MuiSvgIcon-root": {
        fontSize: "2rem",
    },

    "&:hover": {
        color: "black",
    },
});

In my App.js file:

<Icon>{icon}</Icon>

During development, the styling displayed correctly as expected. However, after deploying my app, I noticed that the styling

"& .css-i4bv87-MuiSvgIcon-root": {
        fontSize: "2rem",
    }

was not being applied in the live application.

Could someone provide assistance on this issue?

cssreactjsmaterial-ui

Answer №1

The issue here is that you are utilizing MuiSvgIcon-root to apply the style, while in your styled(Box), you are working with a Box component. Make sure to add the style to the correct CSS class.

If you examine the CSS closely, you will notice that the class being affected by your styling code is MuiBox-root:

https://i.stack.imgur.com/x8Sjq.png

I ran a test in a React CodeSandbox using the following setup:

import "./styles.css";
import { styled, Box } from "@mui/material";

const Icon = styled(Box)({
  color: "gray",
  position: "relative",

  "&.MuiBox-root": {
    fontSize: "2rem",

    ":hover": {
      color: "black"
    }
  }
});

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Icon>my icon</Icon>
    </div>
  );
}

Link to CodeSandbox for reference: https://codesandbox.io/s/priceless-zeh-yhgqob?file=/src/App.js

Answer №2

To increase their priority, try setting it as important. It's possible that another class is taking precedence over it! Verify using the inspector tool after deploying the updated version.

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

Creating a CSS layout with tabs that include a visually appealing right space

My webpage is set up for tabbed browsing, with the tabs displayed as <li>s in block form. The parent div containing the tabs is floated to the right. However, I am encountering an issue where the last tab is not fully aligning with the right side of ...

css

Is there a way to adjust the sizes of images within a flexbox layout?

I am currently working on developing a website for my portfolio and I want to achieve a similar layout to this: https://i.stack.imgur.com/giJNF.png However, I am facing some difficulties with displaying the Twitter/Instagram and Deviantart icons. I am usi ...

htmlcssimageflexbox

Button in Angular gets stuck when a touchscreen is long pressed

In my Angular2 application, I am facing an issue with a button when running on a Windows 10 touchscreen PC in Chrome. Normally, the button works fine and executes the click function. However, if the button is held for 1-2 seconds, it gets stuck and fails t ...

cssangulartypescript

What is the process for obtaining X through the use of createElement('img')?

Is there a way to retrieve the X position from the left of the tag created using document.createElement('img'); var block00 = document.createElement("img"); block00.src = "images/sep1.png"; If so, how can it be done: if (block00.getBoundingCli ...

javascriptcsshtml

Issue with HTML5 Canvas y-axis dimensions

I am attempting to create a basic animated HTML canvas with a moving block controlled by WASD keys. I encountered an issue where drawing a 5x5 rectangle appeared to be 5x10 on the canvas. Upon inspecting my code and logging the position of the element, I d ...

javascriptcsshtmlanimationcanvas

My CSS disappears when using an ASP.Net MVC form

Unable to find any similar issue on Google... seeking some assistance. When I apply CSS formatting to style my form as desired, it displays correctly on the page without any issues. However... When I place the actual form within the following code snipp ...

htmlcssasp.net-mvc

My div is becoming overly wide due to padding and margin issues

Looking at this div: <!------ CODE SNIPPET ------> <div id="content"> <div class="top"> I am cool<br /> I am cool<br /> I am cool<br /> I am cool<br /> </div> </div> <!------ /CODE SNIPP ...

htmlcsswindowpaddingmargin

The validation error `validateDOMNesting(...)`: Element `<tr>` is not valid as a child of element `<div>`

I am currently utilizing the material-ui library in my react.js project. While attempting to test my Row component, I encountered the following console.error: Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>. Below is ...

reactjsjestjsmaterial-ui

CSS: Apply unique padding to the last element without the use of additional classes

My challenge involves a div housing three images, each about 31% in width. The goal is to have padding between them, with the final image having no right padding so that collectively they match the width of a larger image above. Here's an example... ...

htmlcss

Excessive whitespace bordering the perimeter of the webpage

I've recently delved into the world of HTML/CSS and I'm working on creating a simple website. However, I'm encountering some white space-related issues above the header/body and around the sides. Despite trying various adjustments with margi ...

htmlcss

It is not possible for ReactJS to disable a button that has been created dynamically

Incorporating ReactJS, I dynamically generate a form using customized JSON data. render() { return ( <div> <ShowForm src={this.state.data} /> </div> ); } After updating with componentDidUp ...

javascripthtmlreactjsdombootstrap-4

Safari is not functioning properly with the css display:none property

My HTML code looks like this: <div id="loadinganimationsearch"> <div style="color: #28ABE3;font-size: 14px;float: left;">Fetching Textbooks</div> <div id="block_1" class="barlittle"></div> <div id="block_2" ...

htmlcsssafari

Flexbox's bootstrap columns display issue on smaller screens with no wrapping

I am currently working on a section of my website where I have applied some CSS to 2 divs and an anchor tag in order to center the content vertically. However, I am facing an issue with the flex style properties when the window size is less than 768px. In ...

csshtmltwitter-bootstrapflexbox

Looking for a Search Field that clears default text when focused - Compatible with Firefox 3.6?

I have attempted various jQuery and JavaScript solutions found on this page: How to clear text field on focus of text field Surprisingly, all of the solutions work except for FF 3.6. So, I am wondering, What alternative can I use to make this feature com ...

javascriptjquerycssfirefox3.6

I'm looking to showcase the list in a navigation bar by clicking on the hamburger menu. I want to include the 'home' and 'about' text specifically

Having trouble implementing the hamburger menu functionality in my HTML/CSS project. When clicked on a shrunken screen, I want the 'Home' and 'About' text in the nav to appear stacked on top of each other. JS is causing me some difficul ...

javascripthtmlcss

Error message: "Error encountered while building Next.js - ReferenceError: 'describe' is not defined"

I am facing difficulties achieving a successful next build without encountering the following error: > Build error occurred { ReferenceError: describe is not defined Although the dev server and tests execute smoothly, it appears that the jest global d ...

reactjstypescriptjestjsnext.jsts-jest

Utilizing React to dynamically set the required attribute of an <input> element depending on a prop value

My goal is to add the required attribute to the input element based on the value of a prop called isRequired. This prop is passed to the component and is set to false by default. This is the Input component: export default function Input({ name, ...

reactjsreact-props

Testing Material UI DropDown using React Testing Library

I am encountering issues with testing the MUI dropdown component. The error message I am receiving is: Unable to find an accessible element with the role "option" and name "/ninica/i" Below is a code example for reference: https://codesandbox.io/s/react-t ...

reactjsjestjsmaterial-uireact-testing-library

Unable to establish cookie via frontend React application

I am currently working with a backend node server that offers two APIs, one to set cookies and another to get cookies. Here is the backend code for setting and retrieving cookies: Server : localhost:4001 router.get("/addCartToCookie", function( ...

javascriptnode.jsreactjsexpresscookies

Using Typescript to deliver the parent component's props to its children prop

I have a goal to create a versatile component that can accept different props based on its usage in the project. The component should output its children prop along with all the given props (flow-through) and potentially some new constants calculated based ...

reactjstypescripttypescript-generics