css - 如何在 React 中设置 Fluent UI 组件的子元素样式？

Question

我正在尝试在 Fluent UI React 库的组件内设置 HTML 元素的样式。

我想要做的是将“开”/“关”文本放在切换开关的左侧而不是左侧。当我查看我的“编译”代码时，我可以看到该组件被翻译成：

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

我想将 inline-flex 添加到 target-me div 并将 flex-flow 属性设置为 row-reverse 以便将按钮元素放在标签元素的右侧。问题是，我无法在我的代码中定位“target-me”div。

如何在不重写自定义组件的情况下实现这一目标？

谢谢！

Answer 1

好的，我找到了我自己的问题的答案，所以这里是：

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

本质上，您可以使用样式属性来定位组件的不同部分（根、容器、标签..）。使用 VS Code 的 Intellisense 找出您可以在组件内定位哪些元素，然后给它一些您想要的常规 CSS-in-JS。