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

Question

我正在使用来自office-ui-fabric的这个库office-ui-fabric。我的问题是如何在mergeStyleSets中使用供应商前缀

示例-webkit-filter

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

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

还有其他方法可以做到这一点吗？

合并样式库

看起来它没有类型记录定义，IRawStyleBase.ts。

@Vitalie的补充答案：

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

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

问题页- Git OFFICE UI结构

Answer 1

@uifabric/merge-styles库为您提供了自动供应商前缀的技巧，但唯一的问题是，今天自动前缀的规则仅限于只有一个：user-select。我建议您到他们的github回购这里中提交一个问题，或者询问是否可以添加新规则，或者询问如何处理这种情况。

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

因此，要回答您的问题，如果您使用的是TS项目，您就无法指定与IRawStyleBase接口不兼容的内容，但是如果您使用的是js脚本，您可能可以像我在这个码沙箱中所做的那样尝试您的运气，看起来过滤器通过了，但没有其他任何内容。