Reference to theme's primary color instead of a specific color in MUI

Question

Using ReactJS and MUI, I have a project in which I have changed the theme colors.

const newTheme = getMuiTheme({     fontFamily: 'Roboto, sans-serif',     palette: {         primary1Color: cyan500,         primary2Color: cyan700,         primary3Color: grey400,         accent1Color: amberA400,         accent2Color: grey100,         accent3Color: grey500,         textColor: darkBlack,         alternateTextColor: white,         canvasColor: white,         borderColor: grey300,         disabledColor: fade(darkBlack, 0.3),         pickerHeaderColor: cyan500,         clockCircleColor: fade(darkBlack, 0.07),         shadowColor: fullBlack,     }, });    // App class   render() {     return(         <ThemeProvider theme={newTheme}>             <Project />         </ThemeProvider>     )   } 

Everything works as expected. Certain components, like buttons have the ability to set the color based on the primary prop. However, I have a component that uses an icon that needs the primary color. I can import the color and set it directly:

import React from 'react'; import ActionLock from 'material-ui/svg-icons/action/lock'; import {cyan500} from 'material-ui/styles/colors';  export default class LockIcon extends React.Component {     render() {         return(             <ActionLock color={cyan500} />         )     } } 

Is there some way to reference the theme's primary color, rather than setting the color in each component individually? Something like:

import React from 'react'; import ActionLock from 'material-ui/svg-icons/action/lock'; import {primary1Color} from 'somewhere';  export default class LockIcon extends React.Component {     render() {         return(             <ActionLock color={primary1Color} />         )     } } 

Answer 1

If you're using React v16.8.0 and Material-UI v3.5.0 or greater, you can utilize the useTheme() hook:

import { useTheme } from '@material-ui/core/styles';  function LockIcon = () => {   const theme = useTheme();    return (     <ActionLock color={theme.palette.primary1Color} /> }