css - フォーム送信時のresult要素にクラスを追加する【React.js】

Question

React.js を使用して簡単な BMI 計算機を作成しました。結果が健康的なBMI以外の場合、結果のテキストが赤く色付けされるようにしようとしています(スタイルコンポーネントを使用しています)。Form 要素か Result 要素か、どのツールを使用するかにかかわらず、どこに挿入しようとすべきかを理解するのに苦労しています (classNames ライブラリを見ましたが、例に基づいて簡単に使用する方法が実際にはわかりません)。誰の助けにも感謝します。ここで最も意味のあるフォームと結果コードを貼り付けます。

フォーム要素

  const [height, setHeight] = useState();
  const [weight, setWeight] = useState();
  const [classification, setClassification] = useState();
  const [bmi, setBmi] = useState();

  const calculate = () => {
    const bmi = (weight / (height / 100) ** 2).toFixed(2);
    setBmi(bmi);
    if (bmi < 18.5) {
      setClassification("Underweight");
    } else if (bmi > 18.5 && bmi <= 24.9) {
      setClassification("Healthy");
    } else if (bmi > 24.9 && bmi < 30) {
      setClassification("Pre-obesity");
    } else if (bmi < 35) {
      setClassification("Obesity class I");
    } else if (bmi < 40) {
      setClassification("Obesity class II");
    } else {
      setClassification("Obesity class III");
    }
  };

  const onSubmit = (event) => {
    event.preventDefault();
    calculate();
  };

  return (
    <StyledForm onSubmit={onSubmit}>
      <Formula />
      <StyledTitle>Weight</StyledTitle>
      <StyledInput
        value={weight}
        onChange={({ target }) => setWeight(target.value)}
        required
        min={26}
        max={635}
        placeholder="Enter weight in KG"
      />
      <StyledTitle>Height</StyledTitle>
      <StyledInput
        value={height}
        onChange={({ target }) => setHeight(target.value)}
        required
        min={54}
        max={272}
        placeholder="Enter height in CM"
      />
      <Button />
      <Result bmi={bmi} classification={classification} />
    </StyledForm>
  );
};

export default Form; 

結果要素

const Result = ({ bmi, classification }) => {
  return (
    <StyledResultWrapper>
      <StyledResult>{bmi && <>Your BMI is {bmi}</>}</StyledResult>
      <StyledResult>{classification}</StyledResult>
    </StyledResultWrapper>
  );
};
export default Result;

ご協力ありがとうございました。