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
Make their precedence higher by making it
important
may be some other class overriding it! Check on inspect after deployed version.the thing is that you are using
MuiSvgIcon-root
to add the style but in yourstyled(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:
LINK: https://codesandbox.io/s/priceless-zeh-yhgqob?file=/src/App.js