Tengo algunos botones en mi barra de navegación y quiero establecer una clase activa con algunos estilos cuando se hace clic en ellos. Estoy usando componentes con estilo para diseñar. No tengo idea de cómo establecer un estado activo en un botón, sugiérame cómo hacerlo. Abajo están mis códigos

estilo

 export const NavButton = styled.button` border: none; outline: none; display: flex; justify-content: center; align-items: center; text-align: center; /* height: 100%; */ padding: 0.3rem 1.5rem; background: transparent; cursor: pointer; transition: all 0.5s; &:hover { font-weight: 700; background: rgba(204, 204, 204, 0.486); border-radius: 0.3rem; } `;

jsx

 <PrimaryNav> <NavUl> <li> <NavButton>Civil</NavButton> </li> <li> <NavButton>Criminal</NavButton> </li> <li> <NavButton>Corporate</NavButton> </li> <li> <NavButton>Service</NavButton> </li> <li> <NavButton>Taxation</NavButton> </li> <li> <NavButton>Acts</NavButton> </li> <li> <NavButton>Notifications</NavButton> </li> </NavUl> </PrimaryNav>