問題タブ [css-in-js]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - React で Fluent UI コンポーネントのサブ要素をスタイルするにはどうすればよいですか?
Fluent UI React ライブラリからコンポーネント内の HTML 要素のスタイルを設定しようとしています。
私がやりたいのは、「オン」/「オフ」のテキストをトグルの左側ではなく左側に配置することです。「コンパイルされた」コードを見ると、コンポーネントが次のように変換されていることがわかります。
ラベル要素の右側にボタン要素を取得するために、target-me div に inline-flex を追加し、flex-flow プロパティを row-reverse に設定したいと考えています。問題は、自分のコードで "target-me" div をターゲットにできないことです。
カスタムコンポーネントを書き直さずにこれを達成するにはどうすればよいですか?
ありがとう！
reactjs - React と CSS-IN-JS - float ラベルがオートコンプリートを検出しない
まず、私は反応とCSS-IN_JSにまったく慣れていないので、これは初心者の質問かもしれません. しかし、私はこれに対する良い答えを見つけることができませんでした。
使用しているフォームに反応プロジェクトのフローティング ラベルを実装しようとしています。プロジェクト リポジトリ: https://github.com/DawidGaleziewski/alpha-tank-full-stack/tree/master/client
ラベルと入力フィールドを組み合わせた別のコンポーネントを作成しました: https://github.com/DawidGaleziewski/alpha-tank-full-stack/blob/master/client/src/components/atoms/Inputs/InputSlider.js
ラベルを上に移動する必要があるかどうかを判断するために、入力の状態を使用し、長さが 0 より大きい場合はスタイルを適用してラベルを上に移動します。
入力の状態はフォームの状態にリンクされています: https://github.com/DawidGaleziewski/alpha-tank-full-stack/blob/master/client/src/components/Forms/LoginForm.js
それは正常に動作しますが、問題はログインフォームとオートコンプリート (ブラウザーに保存された資格情報/パスワード) にあり、それらがブラウザーに適用されると、コンポーネントはフォーム/入力に設定した初期状態を記憶し、ラベルがカバーされます入力のテキスト: 問題の画像
私は2つの解決策を考えることができますが、それらについてはよくわかりません:
感情の状態を使用してラベルをアップする必要があるかどうかを判断する代わりに、input:valid + label を対象とする標準の CSS トリックを使用します。ただし、問題は、入力タグで必須を使用する必要があることです。また、私のアプリには、オプションにする必要があるフィールドがたくさんあります。
useEffect を使用して、コンポーネントのマウント時にフォームから入力の初期状態を取得します (つまり、document.querySelector(input).value)。ただし、DOMから状態の値を取得するべきではないと思うので、それについてはわかりません。
ここで明らかな何かが欠けているように感じます。提案ありがとうございます