After spending 9 hours scouring the internet for a solution, I am at my wit's end as nothing seems to work.
Currently, I am developing a React component using TypeScript.
The issue lies with a simple use of the Material UI Accordion:
const Accordion = withStyles({
root:{
backgroundColor: 'rgb(193, 195, 191)',
},
rounded:{
'&:last-child':{
borderBottomLeftRadius:'0px',
borderBottomRightRadius:'0px',
},
'&:first-child':{
borderTopLeftRadius:'0px',
borderTopRightRadius:'0px',
}
}
})(MuiAccordian);
My only goal is to pass in my Styled Components theme to apply it as the root=>backgroundColor value.
I believe someone with expertise can quickly identify the problem - could someone please demonstrate how to pass a theme of type DefaultTheme object as props to the withStyles method?
Thank you in advance for any guidance.
EDIT - CODE SOLUTION
Credit goes to @filippofilip for providing helpful links that led me to resolve this issue.
The correct code is:
const Accordion = withStyles(
{
root: (props:DefaultTheme) => ({
backgroundColor: props.colors.backgroundColor,
}),
rounded: {
'&:last-child': {
borderBottomLeftRadius: '0px',
borderBottomRightRadius: '0px',
},
'&:first-child': {
borderTopLeftRadius: '0px',
borderTopRightRadius: '0px',
},
},
},
{ withTheme: true },
)(MuiAccordian);
You may notice the slight variation in parsing the typed props which are of type DefaultTheme from Styled Components.
To implement this, I used the useContext hook to fetch the Styled Components Theme and pass it to the props:
export default function MyAccordianComponent() {
const themeContext = useContext(ThemeContext);
const classes = useStyles(themeContext);
return (
<div className={classes.root}>
<Accordion {...themeContext} defaultExpanded >
---finish writing the rest of the component below
I hope this helps anyone else grappling with similar challenges when working with Styled Components, TypeScript, and Material UI