Why custom material UI styles not reflecting after deployment? - css

Question

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?

Answer 1

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:
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

Answer 2

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