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();


  return (
    // '#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.