How to override .MuiTypography-body1 class in Material UI

Question

I want to override the defaults and apply a font size and family (without using inline) to a list element in a drawer. I don't want to create a new theme. I use the "useStyles" function to do that for other properties, but for some reason it doesn't work for them. If I disable them in the browser dev tools my changes take effect - any idea of how to do that in the code?

There is another similar thread but the explanation unfortunately doesn't help me:overwrite the font size of this class .MuiTypography-body1

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex"
  },
  listItems: {
    margin: "7vh 0 7vh 0"
  },
  listText: {
    padding: "1vh 0 1vh 0",
    textAlign: "center",
    fontSize: "50px",
    fontFamily: "typeface-pacifico"
  }
}));

Answer 1

You have to create a MuiTheme in order to override body1.

Below is the code you will need.

// theme.js
import { createMuiTheme } from '@material-ui/core/styles'

const theme = createMuiTheme({
  typography: {
    body1: {
      fontFamily: "'Open Sans', sans-serif",
      fontWeight: 400,
      fontSize: 16,
      color: "red"
    }
  }
})

export default theme

Then have a ThemeProvider component wrap your content like below,

// example.js
import React from 'react'
import { ThemeProvider } from '@material-ui/styles'
import { makeStyles } from '@material-ui/core/styles';
import theme from 'theme.js'
import Button from '@material-ui/core/Button';

const useStyles = makeStyles(theme => ({
  // Some extra styling if you'd like
  button: {
    margin: theme.spacing(1),
  },
}));


export default function Example() {
  const classes = useStyles();
  return (
    <ThemeProvider theme={theme}>
      <Button className={classes.button}>I'm a button</Button>
    </ThemeProvider>
  )
}