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


  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.