如何修改useState Hook绑定内容的文本及字体、颜色样式

完全可以实现，这里提供两种常用的实现方案：

方案1：调整state结构，同时存储文本和对应样式（灵活度最高） #

你可以把原本只存字符串的ageLabel改为存储对象，同时包含文本内容和样式配置，不同判断分支下设置对应样式即可，修改后代码如下：

// 初始状态设置默认文本和默认样式
const [ageLabel, setAgeLabel] = useState({
  text: 'Age',
  style: {
    color: '#262626',
    fontSize: '14px',
    fontFamily: 'sans-serif'
  }
});

const testDate = () => {
    let day = parseInt(dayText);
    let month = parseInt(monthText);
    let year = parseInt(yearText);
    // 先重置为默认状态
    setAgeLabel({
      text: 'Age',
      style: {
        color: '#262626',
        fontSize: '14px',
        fontFamily: 'sans-serif'
      }
    });
    if (dayText === '' || monthText === '' || yearText === '') {
      setAgeLabel({
        text: 'Age - Please Enter a Valid Date',
        style: {
          color: '#ff4d4f',
          fontSize: '14px',
          fontWeight: 500,
          fontFamily: 'sans-serif'
        }
      });
    } else if (day < 1 || day > 31) {
      setAgeLabel({
        text: 'Age - Please Enter a Valid Day',
        style: {
          color: '#faad14',
          fontSize: '14px',
          fontWeight: 500,
          fontFamily: 'sans-serif'
        }
      });
    } else if (month < 1 || month > 12) {
      setAgeLabel({
        text: 'Age - Please Enter a valid Month',
        style: {
          color: '#faad14',
          fontSize: '14px',
          fontWeight: 500,
          fontFamily: 'sans-serif'
        }
      });
    } else if (year < 1900 || year > 2020) {
      setAgeLabel({
        text: 'Age - Please Enter a Valid Year',
        style: {
          color: '#faad14',
          fontSize: '14px',
          fontWeight: 500,
          fontFamily: 'sans-serif'
        }
      });
    } else {
      saveUserCardData();
    }
};

渲染时直接绑定样式即可：

<label style={ageLabel.style}>{ageLabel.text}</label>

这种方案支持给不同错误类型设置完全不同的样式，比如必填项错误用红色提示，数值范围错误用黄色提示。

方案2：不改动现有state逻辑，通过条件匹配添加CSS类（改动量最小） #

如果所有错误提示的样式统一，不需要区分错误类型，你可以不用修改现有的state赋值逻辑，只需要在渲染时根据文本内容匹配对应的CSS类即可：
首先添加CSS样式：

/* 正常状态样式 */
.age-label-normal {
  color: #262626;
  font-size: 14px;
  font-family: sans-serif;
}
/* 错误状态样式 */
.age-label-error {
  color: #ff4d4f;
  font-size: 14px;
  font-weight: 500;
  font-family: sans-serif;
}

渲染部分代码修改为：

<label className={ageLabel === 'Age' ? 'age-label-normal' : 'age-label-error'}>
  {ageLabel}
</label>

内容的提问来源于stack exchange，提问作者Daniel Döbereiner