0

Fluent UI React ライブラリからコンポーネント内の HTML 要素のスタイルを設定しようとしています。

ここに画像の説明を入力

私がやりたいのは、「オン」/「オフ」のテキストをトグルの左側ではなく左側に配置することです。「コンパイルされた」コードを見ると、コンポーネントが次のように変換されていることがわかります。

<div>
  <label></label>
  <div id="target-me">
    <button>
      <span></span>
    </button>
    <label></label>
  </div>
</div>

ラベル要素の右側にボタン要素を取得するために、target-me div に inline-flex を追加し、flex-flow プロパティを row-reverse に設定したいと考えています。問題は、自分のコードで "target-me" div をターゲットにできないことです。

カスタムコンポーネントを書き直さずにこれを達成するにはどうすればよいですか?

ありがとう！

4

1 に答える 1

0

わかりました、私は自分の質問に対する答えを見つけたので、ここにあります： 

<Toggle styles={{ container: { flexFlow: "row-reverse" } }} />

基本的に、スタイル プロパティを使用して、コンポーネントのさまざまな部分 (ルート、コンテナー、ラベルなど) をターゲットにすることができます。VS Code の Intellisense を使用して、コンポーネント内でターゲットにできる要素を見つけてから、必要な通常の CSS-in-JS を指定します。

于 2020-06-23T12:52:28.530 に答える