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

【问题标题】：How can I style a sub element of a Fluent UI component in React?如何在 React 中设置 Fluent UI 组件的子元素样式？
【发布时间】：2020-06-23 12:21:08
【问题描述】：

我正在尝试从 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。

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

谢谢！

【问题讨论】：

标签： css reactjs css-in-js fluent-ui

【解决方案1】：

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

&lt;Toggle styles={{ container: { flexFlow: "row-reverse" } }} /&gt;

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

【讨论】：