skip to Main Content

I was trying to implement a customized material UI element. Here is how I was trying to increase the size of the icon.

Here is my style code:

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

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

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

App.js:

<Icon>{icon}</Icon>

While development the style is showing properly as intended, but when I have deployed my app I could see that the style

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

is not reflecting in my application.

Can someone guide me?

2

Answers


  1. Make their precedence higher by making it important may be some other class overriding it! Check on inspect after deployed version.

    Login or Signup to reply.
  2. the thing is that you are using MuiSvgIcon-root to add the style but in your styled(Box) see that you have a Box. So you need to add style to the correct css class.

    If you inspect the css you will see that with your style code the class used is the MuiBox-root:

    enter image description here

    I’ve tried in a react codesanbox with this:

    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: https://codesandbox.io/s/priceless-zeh-yhgqob?file=/src/App.js

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search