使用“样式”属性或“类名”属性+“合并样式集”的样式组件？

Question

Fluent UI React的新功能。

我一直在修改框架，并仔细阅读了所有可以找到的文档。我的理解是，在组件样式方面，鼓励使用 CSS-in-JS 方法。我看到有两种方法可以执行此操作-通过styles属性和通过使用mergeStyleSets实用程序功能+ className属性。这是codepen来说明我的意思。

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

Answer 1

我已经尝试了两者，并且更倾向于mergeStyleSets，因为它为我提供了一种可预测地定位所有目标的方法，而我不必学习深埋在每个组件中的“魔术类名”以及它的作用或不作用影响。话虽如此，对于某些关键组件（例如DataGrid）而言，涉及很多样式，所公开的类并不是很难学习的，并且有助于充分利用这些组件。

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

所以对我来说，我一直在从框架中挑选樱桃，将其用于颜色主题，高程和高度复杂的组件（例如DataGrid），但不用于堆栈或堆栈项。