Material UI 5 Beta typography issues

user_16391237 0
Viewed 242

I've been trying to customize the default typography that comes with material UI 5 beta, but it wouldn't work.

import {createTheme, responsiveFontSizes} from "@material-ui/core/styles";
import {ThemeProvider} from "@material-ui/styles";
import {Typography} from "@material-ui/core";

let theme = (createTheme({
    typography: {
        fontFamily: "Poppins",
        h1: {
            color: "#fff",
            fontWeight: 900,
            fontSize: '48px',
            lineHeight: 1.1,
        },
}))
theme = responsiveFontSizes(theme)


    return (
        <ThemeProvider theme={theme}>
            <StyledEngineProvider injectFirst>
                <Typography variant='h1'> Hello there! </Typography>
            </StyledEngineProvider>
        </ThemeProvider>

The result displayed still has the default h1 styling and the font family doesn't work also after importing the font in the index.css file.

material-ui reactjs frontend
1 Answers

The main issue is that you are importing ThemeProvider from @material-ui/styles instead of from @material-ui/core/styles.

Below is a working example based somewhat on your code. Based on your use of <StyledEngineProvider injectFirst>, I'm guessing that you might be using JSS (i.e. makeStyles and/or withStyles) in some parts of your code. In order for ThemeProvider imported form @material-ui/core/styles to work with makeStyles/withStyles (imported from @material-ui/styles), you need to make sure you are using the latest v5 version of both @material-ui/core and @material-ui/styles (currently 5.0.0-beta.0).

import {
  createTheme,
  responsiveFontSizes,
  StyledEngineProvider,
  ThemeProvider
} from "@material-ui/core/styles";
import { Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/styles";

let theme = createTheme({
  typography: {
    fontFamily: "Poppins",
    h1: {
      color: "#f00",
      fontWeight: 900,
      fontSize: "48px",
      lineHeight: 1.1
    }
  }
});
theme = responsiveFontSizes(theme);

const useStyles = makeStyles((theme) => ({
  h1Styles: { ...theme.typography.h1, color: "purple" }
}));

function WithinApp() {
  const classes = useStyles();
  return (
    <>
      <Typography variant="h1">Getting styles via Typography</Typography>
      <div className={classes.h1Styles}>Getting styles via makeStyles</div>
    </>
  );
}
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <StyledEngineProvider injectFirst>
        <WithinApp />
      </StyledEngineProvider>
    </ThemeProvider>
  );
}

Edit Material-UI v5 theme

user_74959300
Related