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

Invoking a React function repeatedly (every second)

Currently, I am working with React and utilizing Material UI to create a modal. The modal is rendered as part of the body of the code, placed at the bottom of the page. Its visibility is controlled by the state; if it's open or closed. However, I&apos ...

javascriptreactjsreact-nativeasynchronousmaterial-ui

Implementing an array of error messages for a single validation rule in React Hook Form

Make sure to use react-hook-form version 7.11.1 for this task. I have a basic control that should display multiple error messages for a single validation rule when it is invalid. When registering this control, I include a custom validation function in the ...

reactjsreact-hook-form

Tips for customizing the appearance of ToggleButton in material-ui

Currently, I'm working on customizing the ToggleButton in order to change the default color when it is selected. However, my attempts have been fruitless so far. const customizeStyles = makeStyles((theme) => ({ toggleButtonSelected: { &q ...

cssreactjsmaterial-ui

What is the best way to personalize Material UI elements, such as getting rid of the blue outline on the Select component?

Embarking on my journey of developing a React app, I made the decision to incorporate Material UI for its array of pre-built components. However, delving into the customization of these components and their styles has proven to be quite challenging for me ...

javascriptcssreactjsmaterial-ui

The provided Material-UI Fade component contains multiple children, which is not supported by 'ReactElement<any, any> | undefined'

I'm struggling to implement a Material UI <Fade> component in my code. Unfortunately, I keep encountering the following error message and as someone who is still learning TypeScript, I am unsure of how to resolve it. Error: Expected ReactElement ...

reactjstypescriptmaterial-ui

Obtain access to global.window.localStorage within getServerSideProps

I have a component that receives props with data and renders the data. In my functionality within the getServerSideProps, I am attempting to retrieve data from localStorage. However, due to window being undefined, I am unable to do so. I have tried using ...

javascriptnode.jsreactjsnext.js

Nextjs unexpectedly displays blank page upon fetching data from Firebase Firestore without any error messages

I am currently facing an issue when trying to retrieve page details from Firebase Firestore using getStaticPaths and getStaticProps in my Next.js project. Despite following the code structure correctly, I am encountering a scenario where the page appears e ...

javascriptreactjsgoogle-cloud-firestorenext.jsgetstaticpaths

What steps can I take to ensure the browser only shows the page once it has completely loaded?

I find it frustrating when webpages load slowly and you can see the process happening. In my opinion, it would be more satisfying to wait until everything is fully loaded - scripts, images, and all - before displaying the page. This brings up two questio ...

javascriptcss

refusing to display the pop-up in a separate window

Hi there, I'm having an issue with a link that's supposed to open in a pop-up but is instead opening in a new tab. I'd like it to open in a proper pop-up window. <button class="button button1" onclick=" window.open('te ...

javascripthtmlcss

Encountering a "Parsing error: Unexpected token, expected ";" " when developing a React application with the provided code

I am currently working on developing a React application, and I have encountered an issue in my app.js file regarding the render function. Despite being new to JavaScript, I am unable to figure out why this error is occurring. Apologies if it is due to a s ...

javascriptreactjs

Issue with web server package.. Unable to locate module

As a newcomer to React.js, I have been exploring various tutorials to successfully set up the environment for React.js! Initially, this was the issue encountered: The CLI has moved into a separate package: webpack-cli. To utilize the CLI, it is necessary ...

reactjswebpack

Ways to extend the waiting timeout from 30000 ms to 60000 ms for npm installation on Ubuntu

Due to the slow internet connection, I was unable to install packages from npm. The issue arose when npm returned an error stating: npm ERR! Response timeout while trying to fetch https://registry.npmjs.org/create-react-app (over 30000ms) I thought tha ...

node.jsreactjsnpmcreate-react-appnpm-install

How can React useEffects avoid an infinite loop when using setData()?

const [resourceType, setResourceType] = useState("posts"); const [data, setData] = useState(""); useEffect(() => { console.log("use effects called: " + resourceType); fetch(`https://jsonplaceholder.typicode.com/${resourceType}`) .then((result ...

javascriptreactjs

The art of positioning in menu - absolute versus relative

Struggling with positioning absolute divs is a common challenge for many of us. In my case, it's horizontal sub-menus with the following CSS: ul.children{ display:none; position:absolute; } ul.children li{ position:relative; height:60px; float:none; ...

htmlcss

The Freemode feature in SwiperJS is not functioning properly when used with React TypeScript

Having a slight issue with SwiperJS. Using version 10.1.0 and the following code : import { Swiper, SwiperSlide } from "swiper/react"; import "swiper/css"; export default function Discover() { return ( <> ...

reactjstypescripttailwind-cssswiper.js

What is the best way to modify a CSS property using logical operators in JQuery?

If an element with the class ".has_padding" does not have any text content, it should be set to "display:none;". However, those elements with text inside should remain visible. Below is some code where I have styled the elements to demonstrate the issue. ...

javascriptjquerycss

Why isn't the background-image displaying with the use of the url() function?

I've been attempting to set an image as the background using background-img:url(imageLing), but it's not working properly. When I inspect the element, it shows me background-image: url(assets/backgrounds/5.jpg);. What could be causing this issue? ...

javascriptreactjstypescriptstyled-components

Using a curly brace in a React variable declaration

After completing a react tutorial, I started customizing the code to suit my requirements. One specific section of the code involved a component that received a parameter called label. render() { const { label } = this.props; ... } For instance, I re ...

javascriptreactjs

Hover over a ListItem

Looking for advice on how to incorporate a Mouseover feature into a Material UI ListItem from the following link: http://www.material-ui.com/#/components/list. As the "SecondaryText" is limited to 2 lines, I am exploring options to display additional data ...

javascriptreactjsmaterial-ui

Using a clipping path with video elements in HTML

I am facing an issue with the clip-path property in Safari browser when using it with a video tag. It works fine in Chrome and Firefox, so I believe Safari should support it as well. However, there might be some bugs in my code causing this problem. Any ad ...

reactjssvgsafariclip-path