I have a MUI styled component that renders a green circular badge.
const StyledGreenBadge = styled(Badge)(({ theme }) => ({
'& .MuiBadge-badge': {
backgroundColor: '#44b700',
color: '#44b700',
width: '15px',
height: '15px',
borderRadius: '100%',
boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
'&::after': {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
borderRadius: '50%',
animation: 'ripple 1.2s infinite ease-in-out',
border: '1px solid currentColor',
content: '""',
},
},
'@keyframes ripple': {
'0%': {
transform: 'scale(.8)',
opacity: 1,
},
'100%': {
transform: 'scale(2.4)',
opacity: 0,
},
},
}));
Now, I want my code to be DRY, so I want to create a StyledYellowBadge.
All I have to do is somehow just change the color property of StyledGreenBadge.
Yet, I could not figure out how for 3 hours.
I have tried something like this:
color: { desiredColor === 'yellow' ? 'yellow' : #44b700'},
where desiredColor is a second argument, after
{ theme }
How can I make achieve this?
You can add custom properties to your styled MUI component by describing the type:
const StyledGreenBadge = styled(Badge)<{ badgeColor?: string }>(
Then, you can pass described property (badgeColor in this case) to your styled Badge component:
<StyledGreenBadge badgeColor="red" badgeContent={4} color="primary">
and assign it to the property you want:
backgroundColor: props.badgeColor ?? "#44b700",
Full code:
const StyledGreenBadge = styled(Badge)<{ badgeColor: string }>(
({ theme, ...props }) => {
console.log(props);
return {
"& .MuiBadge-badge": {
backgroundColor: props.badgeColor ?? "#44b700",
color: "#44b700",
width: "15px",
height: "15px",
borderRadius: "100%",
boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
"&::after": {
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
borderRadius: "50%",
animation: "ripple 1.2s infinite ease-in-out",
border: "1px solid currentColor",
content: '""'
}
},
"@keyframes ripple": {
"0%": {
transform: "scale(.8)",
opacity: 1
},
"100%": {
transform: "scale(2.4)",
opacity: 0
}
}
};
}
);
export default function SimpleBadge() {
return (
<StyledGreenBadge badgeColor="red" badgeContent={4} color="primary">
<MailIcon color="action" />
</StyledGreenBadge>
);
}