Reactjs 在同构react应用程序中为内联样式添加前缀

是否有任何简单的方法可以对autoprefix样式进行修补，从而使呈现的HTML在客户端和服务器上不存在差异

例如，是否有可能

<div style={{display: 'flex'}}/>

---

在您发布的特定情况下，您可能需要创建一个函数，在该函数中传递样式并创建正确的样式。在使用简单前缀的情况下，您可以使用这样的东西，只需将

ms

、

Webkit

等添加到样式结构中。如果react prefixr未正确处理

display:flex

，您可能可以将其作为PR提交。

我也遇到过同样的问题，希望有一种简单的方式来混合样式。因此，我创建了一个库，它允许您使用较少的/sass样式的混合。这将处理相关浏览器的前缀可能性

我之所以说相关，是因为您调用了

display:-webkit-box

语法，基本上是Safari 5.1，现在已经不存在了。此外，它只添加了所需的语法，这意味着您将看不到所显示的完整样式字符串。。。基于浏览器支持，它将提供前缀版本或规范版本，无需使用无用的样式阻塞标记

---

它还很年轻（我今天早上编写了代码），但可能会有所帮助。

为什么不使用css类呢？内联样式允许将样式与各自的组件进行模块化耦合。例如，看看Yeah，我知道你在做什么，但很明显哪里需要供应商前缀或其他类似的东西，使用像“display flex”或类似的全球可用类会更有意义吗？大多数应用程序不会有太多这样的样式，因为传递到组件中的样式都表示为对象，所以这永远无法处理像flexbox这样的事情。在我给出的示例中，键

display

必须映射到多个值，这是不可能的。我甚至没有意识到这一点，但你是对的。在这种情况下，您可能不得不放弃react的内联样式的好处，创建一个类，并将其归咎于浏览器兼容性。实际上，您可以执行类似

{display:'-webkit flex；display:flex'}

的操作来实现多个值。在对象被字符串化时工作。

<div style="display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;"/>