#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.
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
You can also directly pass an inline style to the Typography component.
<Typography style={{ fontWeight: 600 }}>
Inline Styles in React
</Typography>
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
How to change font family of typography in React Material UI
How to pass props to the makeStyles API in React Material UI
Suraj Sharma is a JavaScript Software Engineer. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.