[Typography] margin property is attached to root style by default

[nikhilgupta46]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The problem is that in latest V5 Typography there is by default { margin : 0 } being extended in classes and therefore the margin is getting attached to the root styles which is then being override only by applying !important to the margin from the classes.
During the initial createTheme I am not able to remove the margin or set it to null so that it doesn't get attached to the default root styles .

Expected behavior 🤔

Need to confiigure such that from the properties exposed through createTheme ( e.g. styleOverrides ) that margin property doesn't get attached to root styles and only properties that I specify remains intact to it

Steps to reproduce 🕹

Steps:

Context 🔦

setting margin property through classes to the typography component doesn't override it until important is appended to margin value since attachment of margin : 0 a root by default need to overwrite margin from classes without specifying important

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[mnajdova]

The margin: 0 was there in v4 too https://github.com/mui-org/material-ui/blob/v4.x/packages/material-ui/src/Typography/Typography.js#L10 it is not something new to v5. In your global styles, you can use:

& .MuiTypography-root {
  margin: '10px', // or whatever value you need
}

This way you don't need to use !important

[nikhilgupta46]

@mnajdova the point is that I have override the typography h1 variant with these properties
( fontSize,
fontWeight,
lineHeight
letterSpacing,
fontFamily
color )
that were specified in globalStyles but margin property is by default attached to it's root level properties
so when using typography with variant= "h1" and passing className which has marginRight:10px doesn't work without important ( I want to get rid of margin prop in root to override it through classes without using important )

[nikhilgupta46]

@mnajdova I could comment margin :0 in node_modules / typography but that is a patchy fix which i don't want so wanted to solve through any props exposed

[mnajdova]

Are you using @mui/styles (makeStyles) with the v5 of @mui/material? If this is the case you are likely missing StyledEngineProvider with injectFirst. See https://mui.com/guides/interoperability/#css-injection-order

If this is not the case please create a CodeSandbox illustrating the issue.