uview在字节小程序中grid宫格布局组件样式错乱问题

原因：在编译字节小程序后自定义组件会多出一个层级，所以会导致样式失效问题
这里有两种解决方式：

方案一：

<!-- 处理字节小程序自定义组件多一层嵌套导致uview布局组件失效问题 -->
<!-- #ifdef MP-TOUTIAO -->
<u-grid :border="false" col="4" customStyle="display: block;">
<!-- #endif -->
<!-- #ifndef MP-TOUTIAO -->
<u-grid :border="false" col="4">
<!-- #endif -->
  <u-grid-item customStyle="padding-top:20rpx;padding-bottom: 20rpx;">
    <u-icon :name="item.icon" :size="50"></u-icon>
    <text class="features-title">{{item.title}}</text>
  </u-grid-item>
</u-grid>

方案二：

<u-grid :border="false" col="4">
<!-- 处理字节小程序自定义组件多一层嵌套导致uview布局组件失效问题 -->
  <u-grid-item style="width: calc(100%/4);"
                customStyle="padding-top:20rpx;padding-bottom: 20rpx;width:100%;">
    <u-icon :name="item.icon" :size="50"></u-icon>
    <text class="features-title">{{item.title}}</text>
  </u-grid-item>
</u-grid>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容