How to get React material ui theme object in function components

Last updated on Oct 15, 2022 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 createTheme method and passed it through <ThemeProvider /> component.


Import the useTheme hook from the @mui/material/styles module


Get the Theme object in a function component


import { useTheme } from '@mui/material/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.