Semantic UI ReactのInputコンポーネントのinputタグにクラスを追加したい

経緯

以前Semantic UI Reactを使って画面を作ってるときに、inputタグにクラスを追加してCSSを適用するのに苦労したので記録用に。
多分、編集不可のdisableが白っぽくて嫌だったので、灰色にしたかったけど、普通にクラスを追加して「.class input{~}」ではCSSが利かなかったので、今回の方法をとりました。

Semantic UI Reactについて

いつもReactの開発で使ってるCSSフレームワーク。
簡単にいい感じの見た目のサイトが作れる。
一方、細かいCSSの適用が難しかったり、極まれにCSSの不具合が直されていなかったりして不便を感じることもある。

Semantic UI React - Inputコンポーネント

Semantic UI ReactのInputコンポーネントを呼び出すと、以下のようなHTMLに変換される

<Input />
   ↓   ↓
<div class="ui input">
  <input type="text"/>
</div>

では、<Input />にクラスを追加するとHTMLはどう変化するのか？

<Input className="input-style" />
   ↓   ↓
<div class="ui input input-style">
  <input type="text"/>
</div>

答えは、一番外のdivタグにクラスが追加される。
これではうまくCSSが利かなかった（と記憶している）ので、どうにかしてCSSを利かせたい

解決策①：idを追加する

<Input id="input-style" />
   ↓   ↓
<div class="ui input">
  <input type="text" id="input-style"/>
</div>

Semantic UIのCSSは（おそらく）すべてクラスで適用しているので、idで指定すればCSSは上書きされる
また、inputタグに追加してくれるようです

解決策②：inputタグにクラスを追加する

<Input>
  <input className="input-style" />
</Input>
   ↓   ↓
<div class="ui input">
  <input type="text" class="input-style"/>
</div>

なんか変な感じですが、こうやって書けばinputタグにクラスを追加することができます

感想

今回はInputコンポーネント、inputタグでしたが、他のコンポーネントでも同じようなことができるのではないか、と思います。