Estoy tratando de cambiar entre la vista de list view y grid view usando el siguiente código (no funciona porque no tengo idea de cómo cambiar entre active y not active ):
// List view <button className={styles.viewBtn `${view === 'list' ? 'active': ''}`} onClick={() => setView('list')} type="button" title="List View"> // <svg> </button> // Grid view <button className={styles.viewBtn `${view === 'grid' ? 'active': ''}`} onClick={() => setView('grid')} type="button" title="Grid View"> // <svg> </button> Entonces, para diseñar los botones, import styles from ./styles.less y aquí está mi css para los botones:
.viewBtn { width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; padding: 6px; border-radius: 4px; background-color: transparent; border: none; color: var(--main-color); margin-left: 8px; transition: .2s; &.active { background-color: rgba(195, 207, 244, 0.2); color: #fff; } &:not(.active):hover { background-color: rgba(195, 207, 244, 0.1); color: #fff; } } ¿Cómo cambio entre .active y :not(.active) para el style de los botones? ¿Y .active funcionaría en React ?
tu css seria asi
.viewBtn { ... your btn css } /* Style the active class, and buttons on mouse-over */ .active, .viewBtn :hover { background-color: rgba(195, 207, 244, 0.1); color: #fff; }en jsx uso como este
className={`viewBtn ${view === 'list'? 'active': ''}`}