Ionic React实现点击切换按钮颜色与文字颜色的问题

你的问题出在误用了Ionic按钮的内置CSS变量，--color-activated和--background-activated是按钮处于按压/聚焦状态时的样式变量，不是自定义的选中状态变量。要实现点击后保持样式变化，需要结合你的状态值动态设置按钮样式，以下是两种可行方案：

方案一：内联动态样式（快速实现） #

基于你现有的imageClicked状态，给每个按钮添加style属性，根据当前按钮是否被选中设置背景色和文字颜色：

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,
    });
  };

  // 定义激活状态的样式变量
  const activeButtonStyles = {
    '--background': '#2563eb', // 自定义激活背景色
    '--color': '#ffffff'       // 自定义激活文字色
  } as React.CSSProperties;

  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')}
                style={imageClicked.great ? activeButtonStyles : {}}
              >Great</IonButton>

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

              <IonButton
                id="sadButton"
                shape="round"
                expand="block"
                onClick={() => onClickHandler('sad')}
                style={imageClicked.sad ? activeButtonStyles : {}}
              >Sad</IonButton>

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

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

方案二：CSS类控制（更易维护） #

先在组件对应的CSS文件中定义激活类：

/* Tab1.css */
.mood-button.active {
  --background: #2563eb;
  --color: #ffffff;
  /* 可添加更多样式，比如边框、阴影 */
}

然后修改组件代码，给按钮添加动态类名：

import './Tab1.css'; // 引入样式文件

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>
      {/* 头部代码不变 */}
      <IonContent fullscreen>
        {/* 欢迎语代码不变 */}
        <IonGrid>
          {/* 表情展示代码不变 */}
          <div id="emojisButtonContainer">
            <IonRow>
              <IonButton
                id="greatButton"
                className={`mood-button ${imageClicked.great ? 'active' : ''}`}
                shape="round"
                expand="block"
                onClick={() => onClickHandler('great')}
              >Great</IonButton>

              <IonButton
                id="happyButton"
                className={`mood-button ${imageClicked.happy ? 'active' : ''}`}
                shape="round"
                expand="block"
                onClick={() => onClickHandler('happy')}
              >Happy</IonButton>
            </IonRow>
            
            <IonRow>
              <IonButton
                id="okayButton"
                className={`mood-button ${imageClicked.okay ? 'active' : ''}`}
                shape="round"
                expand="block"
                onClick={() => onClickHandler('okay')}
              >Okay</IonButton>

              <IonButton
                id="sadButton"
                className={`mood-button ${imageClicked.sad ? 'active' : ''}`}
                shape="round"
                expand="block"
                onClick={() => onClickHandler('sad')}
              >Sad</IonButton>

              <IonButton
                id="angryButton"
                className={`mood-button ${imageClicked.angry ? 'active' : ''}`}
                shape="round"
                expand="block"
                onClick={() => onClickHandler('angry')}
              >Mad</IonButton>
            </IonRow>
          </div>
        </IonGrid>
        {/* 创建按钮代码不变 */}
      </IonContent>
    </IonPage>
  );
};

可选优化：简化状态管理 #

你当前的状态用多个布尔值存储选中状态，可以简化为单个变量，让代码更清晰：

const Tab1: React.FC = () => {
  const user = useContext(UserContext);
  // 直接存储当前选中的情绪，初始为noEmoji
  const [selectedMood, setSelectedMood] = useState<string>('noEmoji');

  const onClickHandler = (mood: string) => {
    setSelectedMood(mood);
  };

  // 根据选中的情绪返回对应图片
  const getMoodImage = () => {
    switch(selectedMood) {
      case 'great': return great;
      case 'happy': return happy;
      case 'okay': return okay;
      case 'sad': return sad;
      case 'angry': return angry;
      default: return noEmoji;
    }
  };

  return (
    <IonPage>
      {/* 头部代码不变 */}
      <IonContent fullscreen>
        {/* 欢迎语代码不变 */}
        <IonGrid>
          <div>
            <img 
              src={getMoodImage()} 
              alt={selectedMood} 
              id={selectedMood === 'noEmoji' ? 'noEmoji' : 'emojisImage'} 
            />
          </div>
          <div id="emojisButtonContainer">
            <IonRow>
              <IonButton
                id="greatButton"
                className={`mood-button ${selectedMood === 'great' ? 'active' : ''}`}
                shape="round"
                expand="block"
                onClick={() => onClickHandler('great')}
              >Great</IonButton>
              {/* 其他按钮同理，判断selectedMood是否等于对应值 */}
            </IonRow>
          </div>
        </IonGrid>
        {/* 创建按钮代码不变 */}
      </IonContent>
    </IonPage>
  );
};

内容的提问来源于stack exchange，提问作者Kātā