为什么 Material UI CSS 类中的属性会覆盖自定义 CSS 中的属性？

Question

I was trying to use a npm package which has a Typography element from Material UI. This is written by me. When I try to use it in a project, the typography css class properties override the custom css properties. An example is margin which is present in both the CSS classes but in some scenarios I see the margin of "MuiTypography-h1" overriding the custom css. How do I prevent this?

My general idea is custom CSS properties should always take precedence over MUI default CSS class properties. How can I make this happen?

 <Typography variant="h1" sx={{ width: '235px', height: '96px', fontSize: '20px', fontWeight: 500, lineHeight: '1.2', color: 'primary', textOverflow: 'ellipses', overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 4, WebkitBoxOrient: 'vertical', marginTop: '11px', }} > Title </Typography>

Answer 1

Straight forward way to do: you can directly override the MUI component with your custom CSS properties using the class name in your CSS file, for example in if you want to change the Button component's style, you can do this by applying your required CSS properties to "css-element-class-name" class on your "CSS" file as follows

.css-elemet-class-name{
   color: yellow;
   height: 25px;
   padding: 15px;

}

Answer 2

I've found that, MUI theme should be created in order to override MUI--root properties with your css styles, so try somethins like this:

add your custome styles inside overrides:{}

const theme = createTheme({
  overrides: {
    MuiTypography: {
      h1: {
        '&.MuiTypography-gutterBottom': {
          marginBottom: 7,
        },
      },
      h2: {
        marginBottom: props => (props.gutterBottom ? 20 : null),
      },
    },
  },
});

and for the imports

import createtheme from '@material-ui/core/styles'

if you are using this version:

"@material-ui/styles": "^4.11.2",