不要在微信上用material-ui

2019独角兽企业重金招聘Python工程师标准>>>

微信浏览器已经全面升级Webkit内核了（好样的），所以这篇文章有点不合时宜了，仅留做参考。

—————————–

这里说的 material-ui 是指这个UI框架，并不是说 Google 的 Material Design 设计风格。

自打脱离 Angular 的怀抱拥抱 React 后，我把移动端的前端也都用上了 ReactJS，在前端框架的选择过程中，我瞄上了 material-ui 这个实现了google material 设计的框架，虽然部件并不是很丰富，但是已经可以给我省下很多力气了，Github 上的赞也很多，之前做过一个简单的微信应用，因为很简单，所以用起来没有什么太多的问题。这次开始做一个“比较复杂”的应用，没多想还是上了 material-ui，不想……

微信出了个调试工具，看起来像是用 atom 的同系 electron 君做出来的的，可以比较简单的调试公众号网页。因为是 electron，所以内核应该是webkit无误，在开发整个公众号的时候，我一直在上面调试，最后差不多完成迁移到服务器，用手机打开一看，我·乐·个·趣，这是我做的吗？？

小小地总结如下：

微信Android版里用的是X5的核心，传说中2010年的技术，也能算的上是“现代浏览器”了，但是它不认识flex，material-ui中大量使用了flex布局，从AppBar到GridList，可以说flex布局是CSS3布局最让人振奋的一点，但是微信一脸茫然，都给解释成block了。

OK，我知道微信里可以用古老的-webkit-box布局，和flex是同根同源，先不说那反人类的写法，react中style用的是字典，意味着style={{display:”flex”,display:”-webkit-box”}}最终只能保留后者，那么不是android版微信的咋办？用 vendor-prefix 库吧，微信游览器根本就不在人家的支持范围内！

于是只能用 className 写原生的css，有些东西是可以这么来一下的，但是 material-ui 中的 component 包裹的太深啦，我都没法指明哪个div哪个 input…… 在写了无数的hack后，终于先点样子了。不过还有个坑是，如果你用postCSS，其中的cssnano会把box类型的声明给自动去掉，记住将autoprefixer的remove选项关掉，我们自己来注意不写费代码吧。

不过 toggle 组件一直无法使用，最后查看源码，发现它是依靠 input type=checkbox 来触发的，OK 其实很常规的写法，iPhone上的微信是可以正常动作的，然而在Android微信中，checkbox的input根本就不能修改大小，意味着整个组件只有那么一米米大的触发空间，正常情况下那么一个硕大的Toggle，用户只有点左上角一丁点大的地方的时候才能切换状态；而当你修改一下toggle的大小的时候，你根本不知道那个透明的input在什么位置…… 你给我滚出来我保证不打死你。

最后不得已，放弃组件本身的onToggle，使用外层的元素的onClick来修改toggle的状态，看起来倒也不错。

还有一个我到现在也没明白为啥，dropdown menu 和 select field 在微信里是空白，点开倒是能显示咯菜单背景，但是菜单项看不到，也不可点选，我实在是没力气去debug了，换回原生的select……

最后，material-ui本身还是不错的，在手机版chrome上运行良好，就是我大魅族自带浏览器都运行的很正常。只是没想到亿万用户的微信浏览器这么孱弱，之前一直用bootstrap给微信做前端，看来还是有道理的，太激进的技术是要代价滴。希望微信也多多加油，跟上日新月异的前端发展，不要成为移动时代的IE6哇。

转载于:https://my.oschina.net/yizhichao/blog/1358121