Tengo una extend variable que podría ser una cadena vacía '' o active , que es una clase CSS.
Una vez que se hace clic en el div superior, todos los elementos posteriores se actualizan con "activo"
<div className={`container ${extend ? "active" : ""}`} onClick={() => setExtend(!extend)} > <p className={`card ${extend ? "active" : ""}`}>Visa Card</p> <h1 className={`balance ${extend ? "active" : ""}`}>$55,343.15</h1> </div>entonces mi CSS se ve así
.container { &.active } .card { &.active } .balance { &.active }Siento que hay muchas repeticiones tanto en CSS como en JS y me pregunto si hay una forma más elegante de hacerlo.
Para su JS:
// Use a function to help init classes with active state if needed const addClasses = useCallback((baseClasses) => { const classes = [baseClass]; if (extend) { classes.push('active'); } return classes.join(' '); }, [extend]); return <div className={addClasses('container')} onClick={() => setExtend(!extend)} > <p className={addClasses('container')}>Visa Card</p> <h1 className={addClasses('balance')}>$55,343.15</h1>Para su CSS, depende de lo que esté haciendo en &.active. Si cada uno de ellos tiene el mismo estilo activo, entonces:
Para su CSS:
.container, .card, .balance { &.active { // common style goes here } }Una buena idea en su caso puede ser usar el paquete classnames : https://www.npmjs.com/package/classnames . De esta manera, puede administrar fácilmente los nombres de clase de sus componentes.