Office Fabric UI I[component]StyleProp vs I[component]Styles 界面使用

Posted 2023-03-27

【中文标题】Office Fabric UI I[component]StyleProp vs I[component]Styles 界面使用

【英文标题】：Office Fabric UI I[component]StyleProp vs I[component]Styles interface use

【发布时间】：2019-04-15 08:53:52

【问题描述】：

例如，在 Office Fabric UI 文档中，每个组件都有两个接口

https://developer.microsoft.com/en-us/fabric#/components/nav

有

INavStyleProps 接口

和

INavStyles 界面

实现 INavStyleProps 的组件可以接收任何列出的 props 来自定义样式，例如

我想知道是否有任何方法可以与通过文档公开的 INavStyles 类进行交互；本质上，实现 INavStyles 接口向组件的使用者保证了什么，而不是实现了列出的类和样式。有没有办法覆盖、自定义或以其他方式与通过此接口公开的类进行交互，类似于我们如何使用 props 与实现 INavStylesProps 的组件进行交互。

【参考方案1】：

这里是link，显示了两个界面用于导航。这是我们为 Nav 赋予默认样式的方式。

为了覆盖任何 INavStyles area 的默认样式，您可以使用 styles 属性并将 styleFunctionOrObject 传递给它。正如您从提供的第一个链接中看到的那样，INavStyleProps 用于传递一些值以用于Nav 部分的样式或布尔值以具有一些条件样式。此外，这也是我们将主题传递给样式的方式。

您可以传递给styles 属性的样式函数看起来与我们用来提供默认样式的函数减去getGloballClassNames 后的样式完全相同。此外，如果您只想设置一个区域的样式，则返回类型应为 Partial<INavStyles>，因为所有区域都是必需的，如果您不为所有区域提供样式，它会报错。

如果这消除了关于如何使用这两个接口的困惑，请告诉我。

【讨论】：

我最终在 sharepoint 文档中遇到了这个解决方案，它可以工作。但是，您必须将样式表示为 JSON 对象，并且他们建议将这些样式存储为 css.js 文件。这是您认为最好的方法，还是有更好的方法通过 sharepoint 工具进行集成，类似于它们在导入时将 sass 文件转换为 js 对象的方式。

我认为更好的命名方式是样式对象，而不是 JSON。当您说存储时，您的意思是样式对象实际上是在哪里编写的？另外，您能否给我一个指向您找到的 SharePoint 文档的链接？