Vue中样式穿透共6种方法（Vue2、Vue3样式穿透，避免踩坑）

时间：2024-11-11 12:17:52

Vue中的样式穿透问题

提示：这个问题真的是让我收获很多，一个关于antd design vue 表格的样式修改问题。

文章目录

  • Vue中的样式穿透问题
  • 前言
  • 一、Vue2中的样式穿透如何使用
      • 第一种写法箭头三剑客（原生css）：
      • 第二种（预处理器：less，sass）：
      • 第三种（预处理器：less，sass）：
  • 二、Vue3中的样式穿透如何使用
      • 第一种 :deep()
      • 第二种 ::v-deep()
  • 三、不使用样式穿透也可以修改样式
      • `提示：这里不对代码进行解读了；直接上图：`
  • 总结

前言

提示：这里是我遇到问题的描述！！！！！

1.首先我在开发的时候，遇到的问题如下（感觉可丑）
（下方有修改后的样式）
在这里插入图片描述
2.这个是修改后的样式（比上面的美观多了）
在这里插入图片描述

提示：下面的内容是对我的一些解决方法和对Vue2和Vue3样式穿透的一些理解！！！！！

一、Vue2中的样式穿透如何使用

第一种写法箭头三剑客（原生css）：

   1.看向右边的主角 ????       >>>
   use methods： .类名 >>> .类名{样式}

第二种（预处理器：less，sass）：

   2.看向右边的主角 ????       /deep/ 
   use methods： 
                     	/deep/ .类名{样式}
                     	父类 /deep/ 子类

第三种（预处理器：less，sass）：

   2.看向右边的主角 ????       ::v-deep .类名 {} 
   use methods： 
    					  ::v-deep .类名{样式}
    					  父类 ::v-deep 子类

二、Vue3中的样式穿透如何使用

第一种 :deep()

   1.看向右边的主角 ????         :deep()
   use methods： 
    					    :deep(样式选择器)

第一种如图所示：

在这里插入图片描述

第二种 ::v-deep()

   2.看向右边的主角 ????         ::v-deep()
   use methods： 
    					    ::v-deep(样式选择器)

第二种如图所示：

在这里插入图片描述

三、不使用样式穿透也可以修改样式

提示：这里不对代码进行解读了；直接上图：

在这里插入图片描述
提示：红色箭头???? 制定的区域就是添加权重；但是不要盲目的全局添加；可以先添加一个类，然后使用添加权重的方法

总结

本次关于样式的修改也让我重新了解了一下，有关Vue2和Vue3样式穿透的区别和更改。同时也希望大家，在遇到类似的问题时，也可以看到这篇文章。帮助大家解决问题！！！！！ 加油！！！！！！

相关文章