Why are properties in Material UI CSS classes overriding properties in custom CSS?-CodePudding

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',
    }}
>
    {props.title}
</Typography>

CodePudding user response：

Straight forward way to do: