合并样式 - 如何使用供应商前缀

Question

我正在使用来自 office-ui-fabric 的库 @uifabric/merge-styles。我的问题是如何在 mergeStyleSets?

中使用供应商前缀

示例-webkit-filter：

import { mergeStyleSets } from '@uifabric/merge-styles'

mergeStyleSets({ 
  webkitFilter: 'blur(5px)', // Error! No Typescript definition.
})

还有其他方法可以实现吗？

Merge Styles Library

看起来没有它的 Typescript 定义 IRawStyleBase.ts

@Vitalie Braga 的补充回答：

如果您正在使用 Typescript 项目，这是临时解决方案：

const foo = mergeStyleSets({
  root: [
    {
      backgroundColor: '#f00',
      ...({ '-webkit-filter': 'blur(5px)' } as any)
    },
  ]
})

Issues Page - Git OFFICE UI FABRIC

Answer 1

@uifabric/merge-styles 库在自动为您添加供应商前缀方面很聪明，但唯一的问题是今天自动前缀的规则仅限于 just one: user-select. I would advise you go and submit an issue in their github repo here 并且询问新规则是否可以补充或请教如何处理这种情况。

从更深入的调查来看，他们似乎有一些特定于供应商的支持，但在 IRawStyleBase.ts 中非常有限。这些规则将自动转换为供应商规则。

因此，如果您使用的是 TS 项目，那么要回答您的问题，您无法指定与 IRawStyleBase 界面不兼容的内容，但如果您使用的是 js 脚本，则可以尝试您的和我在这个 code-sandbox 中所做的一样幸运，看起来过滤器通过了，但没有别的。

合并样式 - 如何使用供应商前缀

Merge styles - How to use vendor prefixes

office-ui-fabric