How to use custom properties from MUI theme object with custom props in emotion styled components?

If you’re using TypeScript with Material-UI (MUI) and Emotion styled components, you may come across a situation where you need to use custom properties from the MUI theme object with your custom props in Emotion styled components. This can be a bit tricky, but fortunately, there are a few solutions available.

Solution 1: Using the `styled` function

The first solution involves using the styled function provided by Emotion. This function allows you to create a styled component with access to the theme object. Here’s an example:


import { styled } from '@emotion/react';
import { Theme } from '@mui/material/styles';

interface CustomProps {
  customProperty: string;
}

const CustomComponent = styled.div(({ customProperty, theme }) => ({
  color: theme.customColors[customProperty],
}));

In the above code, we define a CustomComponent using the styled function. The component accepts both customProperty and theme as props. We can then access the custom property from the theme object using theme.customColors[customProperty].

Solution 2: Using the `useTheme` hook

The second solution involves using the useTheme hook provided by MUI. This hook allows you to access the theme object within your component. Here’s an example:


import { useTheme } from '@mui/material/styles';
import { Theme } from '@mui/material/styles';

interface CustomProps {
  customProperty: string;
}

const CustomComponent = ({ customProperty }: CustomProps) => {
  const theme = useTheme() as Theme;

  return (
    
      Custom Component
    
  );
};

In the above code, we define a CustomComponent and use the useTheme hook to access the theme object. We then retrieve the custom property from the theme object using theme.customColors[customProperty] and apply it to the color style of the div element.

Solution 3: Using the `withTheme` higher-order component

The third solution involves using the withTheme higher-order component provided by MUI. This HOC injects the theme object as a prop into your component. Here’s an example:


import { withTheme, Theme } from '@mui/material/styles';

interface CustomProps {
  customProperty: string;
  theme: Theme;
}

const CustomComponent = ({ customProperty, theme }: CustomProps) => (
  
    Custom Component
  
);

export default withTheme(CustomComponent);

In the above code, we define a CustomComponent and wrap it with the withTheme HOC. This injects the theme object as a prop into the component, allowing us to access the custom property using theme.customColors[customProperty].

These are the three solutions you can use to access custom properties from the MUI theme object with custom props in Emotion styled components. Choose the solution that best fits your needs and enjoy the flexibility and power of TypeScript, Material-UI, and Emotion!

Happy coding!

How to use custom properties from MUI theme object with custom props in emotion styled components?