Tengo un componente de estilo MUI que representa una insignia circular verde.
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, }, }, }));Ahora, quiero que mi código esté SECO, así que quiero crear un StyledYellowBadge.
Todo lo que tengo que hacer es cambiar la propiedad de color de StyledGreenBadge.
Sin embargo, no pude averiguar cómo durante 3 horas.
He intentado algo como esto:
color: { desiredColor === 'yellow' ? 'yellow' : #44b700'},donde ColorDeseado es un segundo argumento, después
{ theme }¿Cómo puedo lograr esto?
Puede agregar propiedades personalizadas a su componente MUI con estilo describiendo el tipo:
const StyledGreenBadge = styled(Badge)<{ badgeColor?: string }>( Luego, puede pasar la propiedad descrita ( badgeColor en este caso) a su componente Badge con estilo:
<StyledGreenBadge badgeColor="red" badgeContent={4} color="primary">y asígnalo a la propiedad que quieras:
backgroundColor: props.badgeColor ?? "#44b700",Código completo:
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> ); }