DDR爱好者之家

vue-cli —— 如何局部修改Element样式
站长资源 2024/11/23 佚名
60 1538
DDR爱好者之家 Design By 杰米

　　最近在做vue项目时用到了Element，发现这玩意儿用起来很舒服，很新颖，上手也很快，而且效果足够酷炫。但是后面发现一个很大的问题，那就是Element的样式有限，这极大地限制了项目的应用广度，所以我们有必要对Element内部的CSS进行一定的覆盖，来改变其样式。在修改Element样式时，遇到了一些问题，这里简单做一些记录，便于以后查阅。

　　我在用el-switch做开关切换时，使用默认样式：

代码如下：

vue-cli —— 如何局部修改Element样式

效果：

vue-cli —— 如何局部修改Element样式

　　现在我想把蓝色字体改为其他颜色，但是我发现无论我如何修改样式，界面始终没有任何变化，所以我想到可能是需要覆盖Element默认的el-switch样式。于是，我找呀找，找呀找，终于在node_modules/element-ui/lib/theme-chalk下找到了对应的默认样式，如下所示：

Element默认样式：

vue-cli —— 如何局部修改Element样式

vue-cli —— 如何局部修改Element样式

　　于是，我想着把，这下问题能解决了，我开开心心地在自己的组件里把对应的样式覆盖了：

vue-cli —— 如何局部修改Element样式

　　我鸡冻的点了一下刷新，发现并没有什么卵用，还是以前熟悉的面孔：

vue-cli —— 如何局部修改Element样式

　　我不服气，继续百度，似乎看到一丝曙光，按照网上说的，在样式的color后面加了 !important ，然后心情美丽地刷新了一下，还是老样子，我一个七尺男儿简直想哭，崩了.....

vue-cli —— 如何局部修改Element样式

vue-cli —— 如何局部修改Element样式

　　我仍不死心，继续找度娘，终于老天不负有心人，我get到了我的宝贝，把样式单独写在外面就成功了。

vue-cli —— 如何局部修改Element样式

　　惊喜之余，我发现，这种修改方式存在一个bug，那就是其他页面的样式同时也会被修改成这种样式。我忽的想起，style标签上添加的scoped属性，是表示它的样式作用于当下的模块，很好的实现了样式私有化的目的。如果不加scoped属性，这个样式就具有全局属性。因此，一旦在不加scoped属性的情况下，样式被覆盖，那么整个项目使用到该标签时的样式都会跟着被覆盖。

　　所以问题又来了，如何让该覆盖样式只在当下组件起作用呢？问谁呢？继续找度娘呗.......(才疏学浅，只会度娘....)，找啊找，找啊找，费了好大劲，终于找到了答案。就是简单地用scoped和>符号进行穿透。何谓穿透？(引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。这时就要通过特殊的方式，来穿透scoped。)

　　最后大功告成，如下：

vue-cli —— 如何局部修改Element样式

vue-cli —— 如何局部修改Element样式

注意：

1.这里的  > 可以用 /deep/ 替换掉，这里的 /deep/ 操作符是 > 的别名，同样也可以正常工作。

2.这里的 !important 不加其实也没毛病，但是因为这是使用第三方库的样式，所以在覆盖样式时最好加上 !important ，这样才能指明优先级。

以上就是vue-cli —— 如何局部修改Element样式的详细内容，更多关于vue 修改Element样式的资料请关注其它相关文章！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米