css - 如何在 React 中设置 Fluent UI 组件的子元素样式?
问题描述
我正在尝试在 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。
如何在不重写自定义组件的情况下实现这一目标?
谢谢!
解决方案
好的,我找到了我自己的问题的答案,所以这里是:
<Toggle styles={{ container: { flexFlow: "row-reverse" } }} />
本质上,您可以使用样式属性来定位组件的不同部分(根、容器、标签..)。使用 VS Code 的 Intellisense 找出您可以在组件内定位哪些元素,然后给它一些您想要的常规 CSS-in-JS。
推荐阅读
- javascript - @ApiImplicitQuery 招摇 - 无法配置“枚举”
- typescript - 打字稿:什么是“裸类型参数”
- c# - Asp.net 核心路由 ambiguousActionException
- amazon-web-services - AWS s3:如何快速列出某些对象
- angular - Angular 6 返回函数代码而不是结果
- logging - 是否可以在运行时更改 AWS Lambda 的日志级别?
- php - 需要帮助构建一个正则表达式来接受两种形式的字符串
- unity3d - 在 Unity 中使用 Post Request 返回多个值
- c# - 在 XAML 中将十进制格式化为没有代码符号和额外静态文本的货币
- c++ - 为什么我不能在另一个线程中使用 nameWindow 在一个线程中显示图像?