[material-ui] Cannot globally override `margin`/`margin-*` CSS properties of elements represented by `Typography` about material-ui HOT 3 OPEN

Btw, playing around with this, I've found that overriding h3.MuiTypography-h3 works, not the tag alone h3, not the class alone .MuiTypography-h3, but both of them together will create a rule that takes precedence over the .css-...-MuiTypography-root class generated specifically for the instance of the element. Is this the "idiomatic" way to do it?

I've seen these CSS classes before in the documentation, they seem to be part of the API and so can be used safely for styling without risk of changing in the future. Although it is still not entirely clear to me how reliable this method of global overrides is, for example I just ran into another case where, while overriding button.MuiButtonBase-root works for buttons in some cases, it will still be overriden by an "instance rule" .css-...-MuiStack-root when the button is in a <Stack>...</Stack>:

(I'm learning mui as I go, plus I don't have that much frontend experience to begin with, so I may be missing important points on how to do styling properly...)

from material-ui.

Ok one last comment (sorry for the long thread and it's only been me so far :p).

I quickly realized that this "workaround" with h3.MuiTypography-h3 does not really solve the issue because if the h3.MuiTypography-h3 rule takes precedence over the .css-...-MuiTypography-root rule, then I can no longer override the margin for a specific element for the exact same reason. This made me stop for a minute and think about the whole problem and what it is I'm trying to achieve and what my expectations are from a framework like mui.

On a high level, I would like to be able to specify a default (maybe "default" is a better word here than "override") margin for elements of a certain kind. This is purely to avoid repetition, cause I find myself adding text/buttons a million times and every time specifying a margin, and 95% of the time the margin is the same for the same kind of element (h1, h2, etc.) so to me it's only natural to be able to specify this margin as a default value for that kind. It's also useful in case I want to make consistent small adjustments to the margins, I can do it in one place rather than scouring the codebase looking for all those margins. For the remaining 5% of the time though, I also want to be able to easily override the margin for a specific element where the default value is not suitable.

Now what this means concretely with how HTML/CSS/MUI works, I'm not entirely sure, but from what I can see it seems to me like I have a problem specifically with the .css-...-MuiTypography-root rule (not just for typography elements but other kinds of elements as well) specifying a margin, cause if I understand correctly one of these classes is generated per element, so practically it's as if each element had an id and these were the id-specific (#id {...}) rules, so they are meant to be the most specific, and I understand that they come pre-filled with some properties in order to implement the default styles of mui (after all, it's a collection of ready-to-use styled components), but it ends up preventing me from achieving the (in my view, fairly simple) goal that I described above: global defaults, specific overrides. Again, not sure what this means on an implementation level with how CSS works, but I guess I somehow expect a precedence system as folllows:

                           user-defined   /     user specific overrides       ^ highest precedence
                            properties    \       user global defaults        |
                                                                              |
I have no idea how any of this actually   /  the most specific mui overrides  |
works. I imagine mui has a whole          | some less specific mui overrides  |
hierarchy of rules to implement the       |                  .                |
default styles (e.g. generic container    |                  .                |
> ... > button). The point is, all of     |                  .                |
these would be below BOTH user-defined    |  some more specific mui defaults  |
defaults AND overrides.                   \    the most global mui defaults   v lowest precedence

That's the way I see it, but again, I may be approaching the problem the wrong way or missing some details on how to do styling properly in CSS/MUI, or maybe such a precedence system is not possible in practice cause it creates problems elsewhere that I haven't considered... Let me know your thoughts :)

from material-ui.

Can you please update the CodeSandbox to illustrate what the problem actually is about? In general in CSS the presedence is: tag selector < classname < id, so what you shared makes sense, the MuiTypography styles win over the styles specified for the tag.

I may have misunderstood your question, but I would recommend going over this.

from material-ui.