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タグでしたが、他のコンポーネントでも同じようなことができるのではないか、と思います。
Author And Source
この問題について(Semantic UI ReactのInputコンポーネントのinputタグにクラスを追加したい), 我々は、より多くの情報をここで見つけました https://qiita.com/moto-na/items/f26caa2413873b9bc754著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .