Sometimes, we want to reference to theme’s primary color instead of a specific color in React Material UI.

In this article, we’ll look at how to reference to theme’s primary color instead of a specific color in React Material UI.

How to reference to theme’s primary color instead of a specific color in React Material UI?

To reference to theme’s primary color instead of a specific color in React Material UI, we can call the useTheme hook.

For instance, we write:

import React from "react";
import { useTheme } from "@material-ui/core/styles";

export default function App() {
  const theme = useTheme();

  return <span>{JSON.stringify(theme.palette.primary)}</span>;
}

We call useTheme to return the theme object.

Then we can get the colors from the theme with theme.palette.

Conclusion

To reference to theme’s primary color instead of a specific color in React Material UI, we can call the useTheme hook.