How to change Typography color in React Material UI

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({
  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>
  </ThemeProvider>
}

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

• How to add multiple class names in React Material UI

• How to change font family of typography in React Material UI

• How to make React Material UI Typography bold

• How to create a custom theme in React Material UI

• How to add custom typography variants in React material UI