reactjs - 使用 `styles` 属性或 `className` 属性 + `mergeStyleSets` 的样式组件？

Question

Fluent UI React 的新手。

我一直在修改这个框架，并阅读了我能找到的所有文档。我的理解是在组件样式方面鼓励使用CSS-in-JS方法。我看到有两种方法可以做到这一点——通过stylesprop 和使用mergeStyleSets实用程序函数 + classNameprop。这是一个代码笔来说明我的意思。

我的问题是，它们服务于不同的用例还是几乎相同？我如何决定使用哪一个？谢谢。

Answer 1

我已经尝试了这两种方法，并且更倾向于mergeStyleSets，因为它为我提供了一种可预测地针对所有内容的方法，而且我不必学习深埋在每个组件中的“神奇类名”以及它会影响或不影响什么。话虽如此，对于某些关键组件，例如 DataGrid，涉及到很多样式，并且公开的类并不难学习，并且有助于充分利用这些组件。

当您必须为“悬停”或“活动”或“之前/之后”之类的事情做选择器时，情况尤其如此。与直接在原始 HTML 上使用“mergeStyles”方法相比，尝试通过“样式”公开的魔术类名称来实现这一点对我来说更令人困惑。

所以对我来说，我一直在从框架中挑选，将它用于颜色主题、高度和高度复杂的组件（如 DataGrid），但不适用于 Stack 或 Stack Item 之类的东西。