0
234
VistasObtiene el ícono prop y lo pasa a la función styled()
Obtengo un accesorio de ícono y lo paso a la función de estilo para crear un ícono estilizado basado en él
const IconComponent = ({ isActive, icon }) => { const StyledIcons = styled(icon)` fill: #1f6ed4; & path { fill: ${(props) => (props.isActive ? '#1F6ED4' : '#232323')}; } ` return <StyledIcons isActive={isActive} /> }funciona , pero recibo advertencias como las siguientes:
¿Hay alguna otra forma de crear mi componente StyledIcons y al mismo tiempo recibir el accesorio de icono?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Debe mover sus StyledIcons fuera del componente IconComponent y usar as accesorio para pasar su componente de icon :
const StyledIcons = styled.svg` fill: #1f6ed4; & path { fill: ${(props) => (props.isActive ? '#1F6ED4' : '#232323')}; } ` const IconComponent = ({ isActive, icon }) => { return <StyledIcons as={icon} isActive={isActive} /> };ejemplo de trabajo
Y si no tiene control sobre el icon prop y quiere evitar la segunda advertencia
Advertencia: React no reconoce la propiedad
isActiveen un elemento DOM...
puede prefijar el accesorio isActive con un signo de dólar ($), convirtiéndolo en un accesorio transitorio :
const StyledIcons = styled.svg` fill: #1f6ed4; & path { fill: ${(props) => (props.$isActive ? "#1F6ED4" : "#232323")}; } `; const IconComponent = ({ isActive, icon }) => { return <StyledIcons as={icon} $isActive={isActive} />; };
·
Juan Pablo Isaza
Denunciar
Responde la pregunta