Question

我在div中使用了一些内联样式。所以，我使用了宽度：div的max-content。它在chrome中运行良好，但在firefox中，我必须使用-moz-max-content。那么，有没有办法为chrome和firefox指定样式，在react中使用内联样式？

const divStyle = {
    margin: 'auto',
    width: 'max-content',
    fontSize: 24
  }

我不能为firefox使用另一个宽度键，它会抛出一个错误。

我的反应版本是15.6.1

Answer 1

如果您要在reactjs中进行内联样式，那么最好使用像Radium这样的库。它支持自动供应商前缀。

其他示例包括glamorous css和glamor这两个库都支持供应商前缀。

Answer 2

这（使用内联样式为同一属性添加多个回退值）不受官方支持，可能永远不会。请参阅Dan Abramov的这篇评论（并阅读有关历史的github问题的整个讨论）：

https://github.com/facebook/react/issues/6467#issuecomment-354781011

他建议的解决方案：

例如，您可以使用document.createElement('div')创建DOM节点，然后通过读取来分配.style.myPrefixedProperty并查看它是否“坚持”。

Answer 3

只需将[Autoprefixer] [1]用于对象样式

即可

如果您仍在使用npm，则可以运行npm i --save inline-style-prefixer。

import Prefixer from 'inline-style-prefixer'

const divStyle = {
    margin: 'auto',
    width: 'max-content',
    fontSize: 24
  }

const prefixer = new Prefixer()
const prefixedStyle = prefixer.prefix(divStyle)

他们还提供UMD链接

<!-- Unminified versions -->
<script src="https://unpkg.com/inline-style-prefixer@3.0.1/dist/inline-style-prefixer.js"></script>
<script src="https://unpkg.com/inline-style-prefixer@3.0.1/dist/inline-style-prefix-all.js"></script>
<!-- Minified versions -->
<script src="https://unpkg.com/inline-style-prefixer@3.0.1/dist/inline-style-prefixer.min.js"></script>
<script src="https://unpkg.com/inline-style-prefixer@3.0.1/dist/inline-style-prefix-all.min.js"></script>

响应中的chrome和firefox的内联样式

3 个答案: