How to remove Mui Typography default classes?

Question

I am trying to create a Typography element. I saw that it added a couple of default MUI CSS classes when debugging in the browser. So I tried to disable them by creating empty arrays at the end of the sx prop. It had no effect

As shown in the picture I want to disable those 2 classes or atleast respect the properties I have. It manages to override my properties with its properties like margin.

<Typography
  variant="h1"
  sx={{
      width: '100px',
      height: '55px',
      fontSize: '20px',
      fontWeight: 500,
      lineHeight: '1.2',
      WebkitLineClamp: 4,
      WebkitBoxOrient: 'vertical',
      marginTop: '11px',
      '& .MuiTypography-h1': {},
      '& .MuiTypography-root': {},
  }}
>
  Title
</Typography>

Answer 1

You can use StylesProvider component that lets you change how styles are applied to child components. The options will be available in all child elements of the StylesProvider. We can use the injectFirst boolean prop to add styles that override existing Material UI styles. This way, styles referenced from external CSS files will override Material UI’s.

import React from "react";
import StylesProvider from "@mui/styles/StylesProvider/StylesProvider";
import Typography from "@mui/material/Typography/Typography";
import "./styles.css";

export default function CustomTypography() {
  return (
    <StylesProvider injectFirst>
      <div className="App">
        <Typography>Title</Typography>
      </div>
    </StylesProvider>
  );
}

In styles.css, you can add custom css like this:

.MuiTypography-h1 {
  color: blueviolet;
}

.MuiTypography-root {
  color: red;
}