How to make React Material UI Typography bold

#react #material-ui

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}>
        I am bold

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

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

Related Solutions

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