#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
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
How to change font family of typography in React Material UI
How to build a React Login Form with Typescript and React hooks
Rate this post
Suraj Sharma is a Full Stack Software Engineer. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.