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


Rate this post


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