How to change Typography color in React Material UI

#react #material-ui

Last updated on Nov 3, 2021 by Suraj Sharma

In this tutorial, you will learn to change the color of the <Typography /> component in React Material UI v5.0.

I will discuss four ways to set the color of the Typography component.

1. Using the theme object

You can create a material UI theme object to change the default styling of the typography.

import { createTheme } from '@mui/material/styles';
import { green } from '@mui/material/colors';

const theme = createTheme(theme, {
  typography: {
    body1: {
      color: 'red'
    h1: {
      color: theme.palette.secondary.main
    button: {
      color: green[500]

const App = () => {
  <ThemeProvider theme={theme}>
    <Typography variant="body1">red text</Typography>
    <Typography variant="h1">secondary main colored text</Typography>
    <Typography variant="button">button</Typography>

export default App;

Pass the theme object to the <ThemeProvider /> component so that it is globally applied and accessible across different components in your project.

2. Using makeStyles and className

Another way to apply a color to <Typography /> is to create a custom hook useStyles using the makeStyles method and later use the hook to get the stylesheet in a function component.

import { makeStyles } from '@mui/styles';
import Typography from '@mui/material/Typography';

const useStyles = makeStyles({
  root: {
    color: 'blue'

const Demo = () => {
  const classes = useStyles();
  return <Typography className={classes.root}>blue colored text</Typography>;

export default Demo;

3. Using the style props

Inline styling of the Typography component can also be use to set a different color to it.

import Typography from '@mui/material/Typography';

const Demo1 = () => {
  return <Typography style={{color: 'blue'}}>blue colored text</Typography>;

export default Demo1;

4. Using withStyles

You can even use a high order component withStyles to override the color of the Typography component.

import { withStyles } from '@mui/styles';
import Typography from '@mui/material/Typography';

const styles = {
  h4: {
    color: '#dcdcdc'

const CustomTypography = withStyles(styles)(Typography);

const DemoComponent = () => {
  return <CustomTypography variant="h4">heading4 text</CustomTypography>;

export default DemoComponent;

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.