How to make React Material UI Typography bold

Last updated on Nov 7, 2020 by Suraj Sharma

In this tutorial, you will learn to change the font-weight of the Typography component to bold in React Material UI.

There are many ways to change the font-weight of a Typography in React Material UI.

1. Using ThemeProvider and theme variable

In your App.js file, you can create a theme variable using createMuiTheme API provided in the @material-ui/core/styles

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
 typography: {
   body1: {
     fontWeight: 600 // or 'bold'
   }
 }
})

And pass the theme variable to the ThemeProvider component


import { ThemeProvider } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Typography>
        I am bold
      </Typography>
    </ThemeProvider>
  );
}

This change gets applied globally to all the typography components with variant as 'body1'. body1 is a default variant if no variant props is present

2. Using style props

You can also directly pass an inline style to the Typography component.

<Typography style={{ fontWeight: 600 }}>
  Inline Styles in React
</Typography>

3. Using makeStyles() API

You can make use of makeStyles API, which returns a React hook containing a style sheet object. It uses CSS-in-JS approach to style the components.


import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles({
  bold: {
    fontWeight: 600
  }
})

const Demo = () => {
  const classes = useStyles();
  return (
    <Typography className={classes.bold}>
      CSS in JS
    </Typography>
  )
}

Related Solutions

Rate this post

Suraj Sharma is a Full Stack Software Engineer. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.