When it comes to CSS specificity, the styles that are declared last in the CSS will take precedence when the specificity is the same. In Material-UI, default styles are placed at the end of the <head> element, meaning they will override other styles with the same specificity declared earlier in the <head> (like in the case of font-size). To modify this behavior, you can utilize the StylesProvider component with the injectFirst property, wrapping the top-level of your app. This will move Material-UI styles to the beginning of the <head> element.
For example:
App.js
import React from "react";
import Typography from "@material-ui/core/Typography";
import { StylesProvider } from "@material-ui/core/styles";
import "./styles.css";
export default function App() {
return (
<StylesProvider injectFirst>
<Typography variant="h1" color="primary" className="logoTitle">
Hello
</Typography>
</StylesProvider>
);
}
styles.css
.logoTitle {
font-size: 20rem;
}
Further information and a working example can be found here.
Explore related answers on overwriting styles with classes and css modules here.
Refer to the Material-UI documentation for more details: https://material-ui.com/styles/api/#stylesprovider