vue使用UI组件时无法修改默认样式问题

vue使用UI组件时无法修改默认样式问题

该问题的主要原因是vue文件中style标签上的一个特殊的属性：scoped。

当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。

解决方法一：使用深度作用选择器穿透scoped >>>

.wz-ect >>> .van-dropdown-menu__bar {
  position: relative;
  display: flex;
  height: 48px;
  background-color: #fff;
  box-shadow: unset !important;
}

解决方法二：将 scoped 移除，或者新建一个没有 scoped 的 style（一个.vue文件允许多个style）

<style scoped>
    .fuck {
        // ...
    }
</style>

<style>
    .fuck .weui-cells {
        // ...
    }
</style>