[reactjs] modifier le style d'une class avec onclick

Bonjour à tous.

je cherche desesperement un moyen de modifier le style de la class "MainOptions" au moment du clic sur le bouton "Sign-in" ou "Sign-up" .

voici le code en question :

const MainOptions = ({ onToggle }) => (
  <div className="MainOptions">
    <button name="SignUp" onClick={onToggle}>Sign-up</button>
    <button name="SignIn" onClick={onToggle}>Sign-in</button>
  </div>
);

j'ai trouvé quelques infos sur internet mais je ne parviens pas a le faire fonctionner correctement.
je ne suis pas encore tres a l'aise avec ReactJS.

.MainOptions {
  position: absolute;
  width: 50vw; left: 50%; margin-left: -25vw;
  height: 40px; top: 60%; margin-top: -20px;
  background-color: rgba(0, 0, 0, 0);
  z-index: 99;
}
.MainOptions button {
  position: relative;
  top: 20%;
  width: 130px;
  background-color: rgba(0, 0, 0, 0);
  color: white;
  outline: none;
  border-color: white;
  border-style: double;
}
.MainOptions button:hover {
  border-color: green;
}

j'espere étre assez precis, merci de vos retours.