I'm trying to switch between list view and grid view using the code below (not working cause I have no idea how to switch between active and 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>
So to style the buttons I do import styles from ./styles.less and here's my css for the buttons:
.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;
}
}
How do I switch between .active and :not(.active) for the style of the buttons? And would .active work in React?
your css would be like this
.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;
}
in jsx use like this
className={`viewBtn ${view === 'list'? 'active': ''}`}