Tengo un componente que tiene el color blanco si está activo y negro si está inactivo. ¿Cómo se puede pasar el color negro como utilería?
Mi código ahora mismo (no hace nada):
export function Card (props) { return <div {...props} className={styles.gray} /> } Quiero usar este componente (llamado Card ) en un operador ternario para mostrar si el componente está activo o no.
Suponiendo que está configurando el estado activo fuera de la tarjeta, este es el patrón ternario simple.
Si activo se define fuera de la tarjeta:
function Card({ isActive, ...props }) { return ( <div className={`${styles.gray} ${isActive ? styles.active : null}`} {...props} /> ) } Usando un ayudante como clsx , se vería así:
<div className={ clsx( styles.gray, isActive ? styles.active : null, ) } />¿Es styles el nombre de su hoja de estilo css y gray el selector?
Hay muchas formas diferentes de crear este comportamiento, pero una fácil si tiene un objeto de accesorios con color como accesorio, puede hacerlo: <div style={{ color: props.color }}