Access theme defined with MUI in a styled component - reactjs

Question

I'm using MUI's theming capabilities. I have a file theming.js that has:
import { createTheme } from '#mui/material/styles';
export const myTheme = createTheme({
palette: {
primary: {
main: '#BD72A8',
},
secondary: {
main: '#00A0BE',
},
},
});
I'm attempting to create a styled component that draws on the theme's palette. Here's what I have so far:
import { withTheme } from "#material-ui/core/styles";
const LeftSidebar = withTheme(styled.div`
display: inline-block;
width: 25%;
border: 2px solid ${props => props.theme.palette.secondary.main};
border-radius: 4px;
`);
return (
<ThemeProvider theme={myTheme}>
<LeftSidebar>
...
</LeftSidebar>
</ThemeProvider>
)
The styles component LeftSidebar is picking up the other styles I define, but it's not using the secondary color on my palette as defined in theming.js. In fact, it looks like it's falling onto a different definition of 'theme', because this code results in the border's color being #f50057 - not the secondary color I chose at all, but also not blank.
Can anybody help me understand what I'm doing wrong in trying to combine MUI and styled components?

Answer 1

**try this**
import * as React from 'react';
import { styled, createTheme, ThemeProvider } from '#mui/system';
interface MyThemeComponentProps {
color?: 'primary' | 'secondary';
variant?: 'normal' | 'dashed';
}
const customTheme = createTheme({
components: {
MyThemeComponent: {
styleOverrides: {
root: {
color: 'darkslategray',
},
primary: {
color: 'darkblue',
},
secondary: {
color: 'darkred',
backgroundColor: 'pink',
},
},
variants: [
{
props: { variant: 'dashed', color: 'primary' },
style: {
border: '1px dashed darkblue',
},
},
{
props: { variant: 'dashed', color: 'secondary' },
style: {
border: '1px dashed darkred',
},
},
],
},
},
});
const MyThemeComponent = styled('div', {
// Configure which props should be forwarded on DOM
shouldForwardProp: (prop) =>
prop !== 'color' && prop !== 'variant' && prop !== 'sx',
name: 'MyThemeComponent',
slot: 'Root',
// We are specifying here how the styleOverrides are being applied based on props
overridesResolver: (props, styles) => [
styles.root,
props.color === 'primary' && styles.primary,
props.color === 'secondary' && styles.secondary,
],
})<MyThemeComponentProps>(({ theme }) => ({
backgroundColor: 'aliceblue',
padding: theme.spacing(1),
}));
export default function UsingOptions() {
return (
<ThemeProvider theme={customTheme}>
<MyThemeComponent sx={{ m: 1 }} color="primary" variant="dashed">
Primary
</MyThemeComponent>
<MyThemeComponent sx={{ m: 1 }} color="secondary">
Secondary
</MyThemeComponent>
</ThemeProvider>
);
}

Answer 2

Inspired by this SO question, I kept tinkering around and learned that it wasn't working because I was using the ThemeProvider from MUI, whereas it works if I use the ThemeProvider from styled-components. In other words, this now works:
import styled, { ThemeProvider } from 'styled-components';
const LeftSidebar = styled.div`
...
border: 2px solid ${props => props.theme.palette.secondary.main};
`;
...
<ThemeProvider theme={mnemoTheme}>
<LeftSidebar>
...