vue 无法覆盖vant的UI组件的样式问题
作者：梦幻飞雪 发布时间：2024-05-13 09:44:23
标签：无法覆盖,vant,UI组件,样式
无法覆盖vant的UI组件的样式
有时候UI组件提供的默认的样式不能满足项目的需要，就需要我们对它的样式进行修改，但是发现加了scoped后修改的样式不起作用。
解决方法
使用深度选择器，将scoped样式中的选择器“深入”，即影响子组件
<style scoped>
? .a >>> .b { /* ... */ }
</style>
以上的代码会编译成：
.a[data-v-f3f3eg9] .b { /* ... */ }
注意：如果你使用了Less或Sass等预处理器，可能无法>>>正确解析。
在这些情况下，您可以使用组合/deep/或::v-deep组合 - 两者都是别名，>>>并且工作完全相同。
使用Less或Sass等预处理器的写法如下：
.van-radio {
? /deep/ .van-radio__label {
? ? width: 500px;
? }
}
使用样式穿透,强制覆盖Vant原样式
使用Vant组件的时候，我们会发现在某些场合组件的原样式不符合我们的需求，这个时候我们就需要重写组件的原样式。
这个是组件的原样式
因为style标签添加了scope属性，scope会保护样式不被污染，这里要让我们自己的样式生效就必须使用样式穿透，由父样式穿透到子样式：
.w-all >>> .van-field__control{text-align: right;}
在浏览器可以看到
text-align：left那一栏已经被一条横线划掉，取而代之的是：
而这个，就是因为使用了样式穿透强制覆盖了原样式，从而实现我们需要的样式效果。
来源：https://www.cnblogs.com/wangyihong/p/11535103.html
0
投稿猜你喜欢
- 最近游戏项目在多个国家上线，每个国家都对应两份儿svn目录（一份是本地策划目录，一份是线上目录）。于是乎维护变得很烦躁。需要先更新本地策划s
- 有关JS中字符串的相关文章，现在网上大概不计其数了。这里我不想再就这个问题做过多的论述，只是对几种方式的实现在各种浏览器中的执行效率进行对比
- 改变一个表的分区方案只需使用alter table 加 partition_options 子句就可以了。和创建分区表时的create ta
前言:在进行数据分析时，难免需要对数据集应用一些我们自定义的一些函数，或者其他库的函数，得到我们想要的数据，这种情况下，可能大家第一时间想到- vue-cli 环境变量 process.env使用参考官网： https://cli.vuejs.org/zh/gu
- 问题你需要将数字格式化后输出，并控制数字的位数、对齐、千位分隔符和其他的细节。解决方案格式化输出单个数字的时候，可以使用内置的 format
- 描述random() 方法返回随机生成的一个实数，它在[0,1)范围内。import randomhelp(random)FUNCTIONS
- 在上一篇Python接口自动化测试系列文章：Python接口自动化浅析logging日志原理及模块操作流程，主要介绍日志相关概念及loggi
- 本文实例讲述了php实现的三个常用加密解密功能函数。分享给大家供大家参考，具体如下：算法一：//加密函数function lock_url(
- 本文实例为大家分享了python实现汉诺塔游戏的具体代码，供大家参考，具体内容如下一.汉诺塔汉诺塔问题是一个经典的递归问题，对于这个问题，我
- 从 Python 3 开始，str 类型代表着 Unicode 字符串。取决于编码的类型，一个 Unicode 字符可能会占 4 个字节，这
- 昨天我突发奇想,想用display:inline来实现三列的布局可是搞了半天就是不行。但是理论上是可以的呀（后来才发现是不理解的不深刻，我的
- 本文主要是介绍Go，从语言对比分析的角度切入。之所以选择与Python、Erlang对比，是因为做为高级语言，它们语言特性上有较大的相似性，
- 4 月 27 日，GitHub 趋势榜第 3 位是一个用 Python 编码实现的算法库，Star 数早已达到 26000+链接：https
- 可以的，看看下面的代码和说明：<％sessionID = session.SessionIDtimeout&nbs
- 今天讲下软件开发中最常见的历史数据迁移方式。在讲迁移之前，先简单介绍下几个基本概念。1、什么是历史数据迁移？简单直白地说：就是将一些创建时间
- 什么是M2det目标检测算法一起来看看M2det的keras实现吧，顺便训练一下自己的数据。常见的特征提取方法如图所示有SSD形，FPN形，
- 本文实例讲述了php实现mysql备份恢复分卷处理的方法。分享给大家供大家参考。具体分析如下：分卷处理就是把握们要处理的数据分成一个个小文件
- 如果将程序员分为本文的8种类型，你会是哪一种呢？在求职的时候，相信很多人都被问过这样的问题，“你对自己未来5年的职业规划是怎么样的？” 每当
- 语法格式：row_number() over(partition by 分组列 order by 排序列 desc)row_num
