I'm using the Material-UI (Mui) Box component to save time. It works great most of the time, but I sometimes run into issues when the styling clashes with the default styling of other Mui components. For example, I'm using the Box component to override the default padding-right of the Mui Toolbar (see picture below).
The problem and my question lie in the way the style tags are generated from this code. The style tags generated by this Box component are being overridden by the style tags generated by the Toolbar component (see picture below).
Additionally, when I inspect these style tags the MuiBox tags are definitely inserted before the majority of the other style tags and they seem to be empty. (see pictures below).
I've read the docs over and over, and tried many things. The most promising thing I could find was in the documentation for the Box component:
⚠️ The CSS specificity relies on the import order. If you want the guarantee that the wrapped component's style will be overridden, you need to import the Box last. I tried this but still have had no success (see image below).
I know there are several ways to get around this (e.g., makeStyles, withStyles, inline styles, !important), but these strategies make using the Box component somewhat pointless in many situations. So my question is how do I make the MuiBox style tags have the highest priority (inserted last) and why are they empty when I look at them in DevTools?