自定义引用 UI 组件的样式!-CSDN博客

近几年来，随着前端框架的大量涌现，基于这个框架开发的 UI 组件越来越多。比如：vuejs 对应着的有 ElementUI，Vux, iView 等等，reactjs 对应着的有 Ant Design React-Bootstrap 等等，其他的我就不一一举例了。

做过这方便开发的同学也知道，在开发过程中，我们又希望将代码写得优雅一点，又想适当的修改引用的 UI 组件的样式。为了让样式生效，大家可能做过全局修改某个组件的样式，但是这样问题就来了：并是想将所有引用的地方样式都改掉。我曾经也因为这个问题而头疼不已，后来发现一个很巧妙的方法

https://github.com/vuejs/vue-loader/issues/661

<style lang="less" scoped>
    .public_list{
        :global(.vux-no-group-title.weui-cells:before){
            border-top: none;
        }
        :global(.vux-no-group-title.weui-cells:after){
            border-bottom: none;
        }
    }
</style>
复制代码

这是我修改 vux group 组件边框的样式。但是这里注意的是：要想不影响其他相关引用的样式，我希望你在写样式时每个文件定义一个包裹整个文件内容的 class ，然后把 :global 代码写在里面。