How to get React material ui theme object in function components

#react #material-ui

Last updated on Jun 9, 2021 by Suraj Sharma



In this tutorial you will learn how you can access the React Material UI theme object in a React function component

The theme object is accessible in function components using the useTheme() hook.


The useTheme() hook returns the default React Material UI theme object if you don't have a custom theme object created using createMuiTheme method and passed it through <ThemeProvider /> component.


Import the useTheme hook from the @material-ui/core/styles module


Get the Theme object in a function component


import { useTheme } from '@material-ui/core/styles';

const MyCustomComponent = () => {
  const theme = useTheme();

  console.log(theme);

  return (
    <p>{theme.palette.primary.light}</p>
    // '#7986cb'
  )

  export default MyCustomComponent;
}


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.