[ComboBox] classNameを条件で切り変えた場合に、スタイルが正しく反映されない場合がある – MESCIUS ナレッジベース

作成日: 2021/10/22 最終更新日: 2022/02/22

文書種別

不具合

状況

修正済み

詳細

className属性を利用して任意のスタイルをComboBoxに設定した場合、classNameを条件（例：stateによって切り替える）によって切る変えると、設定したスタイルが正しく反映されない場合があります。

回避方法

この問題はバージョン5.20213.834で修正されました。

修正版を適用しない場合の回避方法は次の通りです。

以下のCSSを追加します。

.valid .wj-control {
  color: green;
}

そして、ComboBoxをdisplay: "inline-block"を設定したdiv要素でラップし、そのdiv要素のclassNameに切り替えたいクラスを設定します。

<div style={{ display: "inline-block" }} className={isValid ? "valid" : "invalid"} >
  <ComboBox
    lostFocus={handleBlur}
    itemsSource={source}
    isRequired={false}
  />
</div>