前端如何覆盖组件库样式

        直奔重点，样式无法覆盖最根本的原因就是权重不够，权重相关内容网上一大片，本文仅举例容易忽略的问题以及解决方案。只要按照权重规则，无论那个组件库，其修改原理都是一样的。
举例：

        上图中，我需要修改vxe-table中该类名下的padding值，我们只需要将该类名完整复制在代码中重新赋值即可。

        样式被成功修改，此处类名只能比被覆盖样式的类名多而不能少，因为类名的数量会算作权重，否则无法覆盖。此外，这个案例中也可以直接去修改var定义的变量的值。
        除此之外，还有一个容易被忽略的点就是样式表的顺序。如下图所示：

        上图中，我设置的8px的左右padding没有覆盖住vxe-table中设置的样式，其原因为我代码中自定义的样式表在组件库样式表之前被解析到了浏览器中。如下图：

        此处解决方案将代码中样式表引入顺序进行调整，将自定义样式放在组件库后方引入即可。


对于父子组件样式穿透问题处理，跳转此处关于vue+组件库开发中，给style添加scoped后样式添加失效问题_vue样式设置为scope类名不高亮-优快云博客