uniapp小程序修改组件样式

项目场景

使用uView1.x的popup弹出框组件时发现超出框外的元素会被overflow：hidden隐藏，如图所示：

期望效果（右上角显示关闭按钮×）：

实际效果（右上角缺少关闭按钮×）：

问题描述

popup组件的框外有样式 overflow: hidden导致内容溢出隐藏。 正常思路是通过父组件去修改子组件（popup）对应dom的样式如overflow: unset。 h5端可以直接通过css选择器修改样式，但小程序端比较麻烦。

问题分析

正常封装好的组件，可以通过深度选择器方式修改，如在less/scss下使用/deep/前缀

/deep/ .uni-scroll-view {
    overflow: visible!important;
}

但是实际查看dom结构时发现小程序下并不存在类名为uni-scroll-view的dom：

h5下却能找到，因此能使用/deep/作出修改：

后面查看了popup组件的源码，发现用的scroll-view标签包裹着slot，而scroll-view标签组件本身的设计就是有overflow: hidden的样式。（应该是官方组件保护机制问题导致无法解析该dom吧

该部分的源码如下：

<scroll-view class="u-drawer__scroll-view" scroll-y="true">
    <slot />
</scroll-view>

解决方案

1. 自己重新封装popup组件，把scroll-view换成view标签，问题解决。（view本身没有overflow: hidden的样式，所以不存在溢出隐藏。）若想同步官方组件得定期重新copy一份再修改代码，操作繁琐。

2. （曲线救国）既然无法从父组件影响scroll-view样式，就从内部打入，把关闭按钮×的div设置固定定位position: fixed，此时将不会受到父组件overflow: hidden样式影响，再设置transform的translateX、translateY位移到对应位置即可。

.close {
    position: fixed;
    transform: translate(100%, -100%);
}

最后

uView2.x已经移除了popup里的scroll-view组件，建议使用uView2.x