vue项目样式中的scoped属性

☞☞ 个人主页欢迎访问 ☜☜

---

大家好，我是苏日俪格，这段时间在做项目的关于皮肤的一个里程碑，也就是大量的修改UI界面样式，避免不了的更换一些插件、新增一些组件或是修改样式，在项目中有很多东西都是公共组件，为了方便每个人的使用，当然每个人的页面效果不一定全都是一样的，所以需要在自己的组件中重写一下样式，这个时候问题就来了，在我的组件里引入的公共组件ztree、vuescroll和bootstrap-table以及项目中自行封装的组件等，我无论怎么也重写不了它的样式，即使加了最变态的important，那都不一定完全好使，而且important本来也不是什么好东西，先不说影不影响别人的组件样式，自己之后要是想覆盖都做不到，改了大半天改到自己怀疑人生，这时候没办法只好google一下，却不曾想是scoped这个妖孽的过。。。

连自己最信任的代码color:red都实现不出来，能不上吊么。。。
我在网上发现了这个：

为了方便称呼，我们假设把这种组件叫做模块私有组件，其他的未加scoped的叫做模块一般组件。
通过查看DOM结构发现：vue通过在DOM结构以及css样式上加唯一不重复的标记，以保证唯一，达到样式私有化模块化的目的。

也就是说这个小可爱把我们的组件变成了私有而且不可更改，如果我们避免它影响全局，这么写确实很好，心里很舒服，那如果要给公共组件的样式做一些调整，那就哭爹喊娘都不好使了；

那么我的解决办法虽然有些麻烦，但是还是很好用的，就是在组件模板中最外层的容器上加一个id，因为整个vue项目就是一个页面，id也一定是唯一的，把scoped去掉，在样式的外面都加上一个id，改变它的权重，使其只在本组件中起作用。

#defineSecret .ztree li ul li a span.node_name {
    display: inline-block;
    width: 66px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
#defineSecret #tree>li>a span:nth-child(2) {
    font-weight: bold;
}
#defineSecret .bootstrap-table {
    margin: 20px auto;
}
#defineSecret .bootstrap-table .table:not(.table-condensed) {
    padding: 0;
}

当然栗子中的defineSecret就是我给组件加的id，这样无论是ztree还是bootstrap-table的样式都是可以重写的。

之前参考了下面的那篇文章，提到了它所谓的穿透scoped和曲线救国的方式，我给博主提了bug，其实并不好用，最简单最直接就是给组件加个标识，所有样式都基于这个标识进行重写。

参考文章：
https://www.cnblogs.com/karthuslorin/p/9038854.html

如果喜欢本文的话单击爱心加关注谢谢O(∩_∩)O~

本文的所有内容均是一字一句敲上去的，希望大家阅读完本文可以有所收获，因为能力有限，掌握的知识也是不够全面，欢迎大家提出来一起分享！谢谢O(∩_∩)O~

欢迎访问我的GitHub，喜欢的可以star，项目随意fork，支持转载但要下标注；
欢迎光临个人主页

等一下( •́ .̫ •̀ )，我还有最后一句话：

我爱你，

如果我要的你一开始就给了我，

那我就失去了与你纠缠不休的理由，

你也知道，

我没有多余的故事，

也只有你这一件往事，

再见...