如何在React中对Fluent UI组件的子元素进行样式化？

提问者：小点点

我正在尝试从Fluent UI React库对组件内部的HTML元素进行样式化。

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

null

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

null

我想在target-me div中添加一个inline-flex，并将flex-flow属性设置为row-reverse，以便使button元素位于label元素的右侧。问题是，我无法在代码中锁定“target-me”div。

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

谢啦！

共1个答案

匿名用户

好吧，我找到了我自己问题的答案，下面是:

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