New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[material-ui] Cannot globally override margin
/margin-*
CSS properties of elements represented by Typography
#42071
Comments
margin
/margin-*
CSS properties of elements represented by Typography
margin
/margin-*
CSS properties of elements represented by Typography
Btw, playing around with this, I've found that overriding 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 (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...) |
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 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
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 :) |
margin
/margin-*
CSS properties of elements represented by Typography
margin
/margin-*
CSS properties of elements represented by Typography
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. |
Steps to reproduce
Link to live example: https://stackblitz.com/edit/github-csxp7s?file=src%2Findex.tsx
Steps: (following the instructions in the documentation)
components.MuiCssBaseline.styleOverrides
field and override the margin of a text element, e.g.h3
<ThemeProvider>...</ThemeProvider>
with the theme and<CssBaseline />
Current behavior
The margin specified in the CSS override has no effect:
Expected behavior
The margin specified in the CSS override is applied:
Context
I have a feeling this is what was being complained about in #30360, although the poster there seemed to be getting into implementation details and I see the discussion led nowhere.
I'm presenting the issue to you from a user's perspective: according to this part of the documentation (second example with
CssBaseline
) I should be able to globally override any CSS property of any element in my custom theme, insidecomponents.MuiCssBaseline.styleOverrides
, but the example conveniently usescolor
which does work, except thatmargin
does not, which took me a little investigating to figure out. Overriding any of themargin-*
properties doesn't work either as themargin
property in.css-...-MuiTypography-root
still takes precedence.I haven't tested it but I can tell from the content of these generated
.css-...-MuiTypography-root
classes thatfont-family
,font-weight
,font-size
,line-height
andletter-spacing
all wouldn't work here either. BUT, mui gives us a way to override all of those in the theme, just somewhere else, undertypography.h1
,typography.h2
, etc. So onlymargin
is really a problem here.The only workarounds I've found so far are:
Typography
with my own custom component that sets themargin
on the wrapped component directly depending on the variantmargin: ... !important
propertiesBut I think they're both pretty dirty. I'd like mui to provide me with a proper way to set global margins for the different text elements.
Your environment
npx @mui/envinfo
On my side I reproduced this on both Chromium (
124.0.6367.60
) and Firefox (125.0.1
).Search keywords: typography margin css override
The text was updated successfully, but these errors were encountered: