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}>
      <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



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