Estoy tratando de aprender y convertir mi proyecto de css a componente con estilo ( https://styled-components.com/ ), en este momento he convertido todos mis otros componentes excepto un componente en el que estoy atascado, revisé otros ejemplos de stackoverflow pero no era del mismo tipo. Tengo nombres de clase condicionales.
Mi pregunta es cómo convertir el componente InfoBox para usar un componente con estilo. ¿Necesito inyectar los estilos a través de algún tipo de contenedor de componentes con estilo o eso no es necesario?
el inglés no es mi lengua materna, por lo que podría estar equivocado
mi código:
import React from 'react' import "./InfoBox.css" function InfoBox({ isRed, active, activetored, ...props }) { return ( <div onClick={props.onClick} className={`infoBox ${active && "infoBox--selected"} ${activetored && "infoBox--selectedtored"} ${isRed && "infoBox--red"} `} > </div> ) } export default InfoBox <div className="app__stats"> <InfoBox isRed active={typeofCase === "cases"} onClick={(e) => setTypeofCase('cases')} /> <InfoBox isGreen active={typeofCase === "recovered"} onClick={(e) => setTypeofCase('recovered')} /> <InfoBox isRed activetored={typeofCase === "deaths"} onClick={(e) => setTypeofCase('deaths')} /> </div>css es así (puedes poner lo que sea):
. infoBox--selected { border-top: 10px solid greenyellow; } . infoBox--selectedtored { border-top: 10px solid red; } . infoBox--red { border-color: darkblue; }Una de las ideas detrás del componente con estilo es evitar los nombres de clase. En lugar de configurar el css por clase, tiene pocas opciones. lo más fácil probablemente sea usar sus accesorios dentro del código css y cambiar el estilo por él:
const InfoBox = styeld.div` border-color: ${props => props.isRed ? 'darkblue' : 'black'}; border-top: ${props => props.active ? '10px solid greenyellow' : 'red'}; ... `;de esta manera, no necesita nombres de clase (aunque también se puede hacer con él, obviamente).
Ahora, en lugar del div dentro del componente, use el componente de estilo InfoBox que acabamos de escribir y listo.