Изменить цвет кнопки и цвет текста при нажатии, используя ионную реакцию

Question

Я использую Ionic React в своем проекте для создания вкладки выбора настроения. Когда пользователь выбирает/нажимает настроение (кнопку), эмодзи, цвет кнопки и цвет текста кнопки меняются. Если пользователь затем нажмет другую кнопку, предыдущая кнопка вернется к своему исходному цвету.

так:

но я могу изменить только изображение смайлика. я пытался использовать--color-activatedи--background-activatedчтобы изменить цвет цвета кнопки и цвет текста, но ничего не меняется. кто-нибудь знает, как это сделать? любая помощь будет оценена

вот мой код:

      const Tab1: React.FC = () => {
  const user = useContext(UserContext);

  const [imageClicked, setImageClicked] = useState({
    noEmoji: true,
    great: false,
    happy: false,
    okay: false,
    sad: false,
    angry: false
  });

  const onClickHandler = (order: any) => {
    const resetimages = {
      noEmoji: false,
      great: false,
      happy: false,
      okay: false,
      sad: false,
      angry: false
    };
    setImageClicked({
      ...resetimages,
      [order]: true,
    });
  };

  return (
    <IonPage>
      <IonHeader translucent={true} mode="ios" class="ion-no-border">
        <IonToolbar>
          <IonTitle id="headerTitle">Select Your Mood</IonTitle>
          <IonButtons slot="start">
            <IonButton id="headerSettings" routerLink="/userProfile">
              <IonIcon slot="icon-only" size="large" icon={personCircleOutline} />
            </IonButton>
          </IonButtons>
        </IonToolbar>
      </IonHeader>

      <IonContent fullscreen>
        <IonTitle class="ion-text-center" id="welcomeTitle">
          <div>
            Hello {user?.displayName},
          </div>
          <div>
            How are you today?
          </div>
        </IonTitle>

        <IonGrid>
          <div>
            {imageClicked.noEmoji && <img src={noEmoji} alt="noEmoji" id="noEmoji" />}
            {imageClicked.great && <img src={great} alt="great" id="emojisImage" />}
            {imageClicked.happy && <img src={happy} alt="happy" id="emojisImage" />}
            {imageClicked.okay && <img src={okay} alt="okay" id="emojisImage" />}
            {imageClicked.sad && <img src={sad} alt="sad" id="emojisImage" />}
            {imageClicked.angry && <img src={angry} alt="angry" id="emojisImage" />}
          </div>

          <div id="emojisButtonContainer">
            <IonRow>
              <IonButton
              id="greatButton"
              shape="round"
              expand="block"
              onClick={() => onClickHandler('great')}
              >Great</IonButton>

              <IonButton
              id="happyButton"
              shape="round"
              expand="block"
              onClick={() => onClickHandler('happy')}
              >Happy</IonButton>
            </IonRow>
            
            <IonRow>
              <IonButton
              id="okayButton"
              shape="round"
              expand="block"
              onClick={() => onClickHandler('okay')}
              >Okay</IonButton>

              <IonButton
              id="sadButton"
              shape="round"
              expand="block"
              onClick={() => onClickHandler('sad')}
              >Sad</IonButton>

              <IonButton
              id="angryButton"
              shape="round"
              expand="block"
              onClick={() => onClickHandler('angry')}
              >Mad</IonButton>
            </IonRow>
          </div>
        </IonGrid>

        <IonButton
        id="Create"
        shape="round"
        expand="block"
        routerLink="/addnote"
        >Create +</IonButton>
        
      </IonContent>
    </IonPage>
  );
};