経緯
以前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タグでしたが、他のコンポーネントでも同じようなことができるのではないか、と思います。
↧