Css material ui 0.15.2在服务器（而不是客户端）上呈现附加的供应商前缀样式，导致React 15.2.1警告

我正在使用以下设置：

• react

  version

  15.2.1

• materialui

  version

  0.15.2

• express

  和

  通用路由器

  用于服务器端渲染

每当我使用

材质ui

组件时，我都会遇到以下类型的错误：

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:

 (client) uot;);mui-prepared:;" data-reactid="36">
 (server) uot;);mui-prepared:;-webkit-transition:a

出现此错误的原因是，

express

呈现的HTML与我的浏览器呈现的HTML之间存在差异（问题不是特定于浏览器的；我在Chrome、Firefox和Safari上进行了尝试，结果都是一样的）

以下是服务器为一个组件生成的HTML（

Paper

）

如果不清楚，则仅在服务器上添加了

-webkit转换

和

-moz-box-size

属性

我查看并发现

材质ui

的主题系统使用一些前缀自动为它使用的任何内联样式添加前缀，我相信使用

内联样式前缀

。然而，我不知道如何使用这些信息

---

我知道

内联样式前缀器

有一个

静态

版本，可以使用该版本，以便客户端和服务器强制使用相同的

用户代理

。这可能吗？

http请求头中包含的pass user agent值可以解决此问题

global.navigator.userAgent = req.headers['user-agent'] || 'all';

<div class="Cv_me_2f3" style="color:rgba(0, 0, 0, 0.87);background-color:#ffffff;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;box-sizing:border-box;font-family:Roboto, sans-serif;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0 3px 10px rgba(0, 0, 0, 0.16),
         0 3px 10px rgba(0, 0, 0, 0.23);border-radius:50%;background-image:url(&quot;https://media.licdn.com/mpr/mpr/shrink_100_100/AAEAAQAAAAAAAANxAAAAJGU3NGRhZmNiLWExZjMtNGY3MC1hNzNjLWY4OTJlMGJmZTcyYQ.jpg&quot;);mui-prepared:;" data-reactid="36"></div>

style="...mui-prepared:;-webkit-transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;-moz-box-sizing:border-box;" data-reactid="36"

global.navigator.userAgent = req.headers['user-agent'] || 'all';