How to get React material ui theme object in function components

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

• How to add custom typography variants in React material UI

• How to use Material UI icons in React Material UI

• How to add multiple class names in React Material UI

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

• How to detect dark mode theme in React Material UI

• How to build a React Login Form with Typescript and React hooks