Vue中获取第三方UI组件库类名并修改样式

2022-09-28 13:47:11

前言

明明是比较简单的问题,也曾经遇见过两次,被我整复杂了,愣是来回试了一个多小时,好记性不如烂笔头,为了防止下次还走弯路,记录一下,提醒自己。

问题

想要修改第三方组件库 loading 组件的样式,无论如何覆盖样式都不生效,加了/deep/!important 也是白搭。

排查思路如下:

  1. 查看想要覆盖的样式是否是行内样式,不是行内样式,根据其优先级才可以覆盖生效 ---- 不是行内样式;
  2. /deep/ 获取类名,未生效,加!important, 不生效;
  3. 这里踩了一个大坑,以前遇到过,这次又栽进去,那就是scoped 我忘记加了,导致没有生效,很多时候只要scoped +/deep/ 就能解决!但覆盖样式仍然还是没有生效。。。
  4. 最后一个大坑,我使用 Loading 组件是用的插件调用方式,不生效,换成标签组件引用,完美解决!

总结

  1. scoped +/deep/
  2. 标签组件引入方式而非插件式调用

多积累!

  • 作者:一个爱运动的前端程序媛
  • 原文链接:https://blog.csdn.net/weixin_42118522/article/details/121022971
    更新时间:2022-09-28 13:47:11