How to pass props to the makeStyles API in React Material UI

In this tutorial, you will learn how you can pass a function component's props to makeStyles API in React Material UI

Consider, you have a function component CustomMessage, whose css color property is pass from the parent component as props.

And, you want to access that color property directly inside makeStyles API.

To achieve that, you can use an arrow function inside the style property instead of a value

The arrow function has access to the props you have passed to useStyles() as an argument

Example

./CustomMessage.jsx

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles({
  root: {
    color: (props) => props.color,
    fontSize: 16
  }
});

const CustomMessage = (props) => {
  const classes = useStyles(props);

  return (
    <Typography className={classes.root}>
      {message}
    </Typography>
  );
};

export default CustomMessage;

./App.jsx

const App = () => {
  return (
    <>
      <CustomMessage color="red" message="error message" />
      <CustomMessage color="green" message="success message" />
    </>
  );
};

export default App;

Related Solutions

• 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

• Call parent component method in a child component in React and Typescript