修改组件默认样式之/deep/(less,sass)

最新推荐文章于 2024-12-19 09:13:21 发布
最新推荐文章于 2024-12-19 09:13:21 发布
阅读量5.6k 收藏 2
点赞数 2
分类专栏： css vue 文章标签： css vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43702430/article/details/117998797
版权
vue 同时被 2 个专栏收录
23 篇文章 0 订阅
订阅专栏
css
12 篇文章 0 订阅
订阅专栏

在使用第三方组件时有时候我们想修改组件的样式，可以使用全局的方式，即不使用scoped。如果多处共用我们只需要统一修改，假如有多种类型呢？我们不得不另起一个名字。如果我们想要封装一个组件，定义的样式希望在该文件中生效，不影响其他组件，我们将使用scpoed的方式。这种方式去修改第三方组件的样式往往是无效的，什么原因呢？怎么处理呢？
使用scoped的方式定义的自定义dom样式所生成的dom结构有额外的属性，然而所定义的组件样式在组件结构中并不会添加该属性
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

而打包生成的样式结构类似于.cost-detail .singleConstImg[data-v-762c4be2]，所以样式.cost-detail .el-dialog 无效。
解决方式：
在less或者scss等编译语言中使用/deep/
或者在style(没用使用scss等)中使用>>>如cost-detail >>> .el-dialog{}
这时候打包出来的样式结构是
在这里插入图片描述
在组件样式上使用了/deep/后，内部定义的组件样式或者自定义样式不需要再次使用/deep/，否则样式无效。

项目中如何修改element-ui的默认样式 （去除scoped,样式穿透 ＞＞＞ , less/sass : /deep/）
fengshaopu的博客
06-10 1561
如果我们要去修改这个的距离左边的宽度的话 第一种：不使用sass，sess 就右键找到位置所在,然后找到对应的样式 去编辑器里面修改， 这样的话 是实现不了的，我们要把scoped去掉就好了 2.使用 lass，less的话 就可以用 穿透样式了 >>> 还有 /deep/ >>>.el-pagination__total { margin-right: 72px; font-weight: 400; color: #606
项目中如何修改element-ui的默认样式(去除scoped,样式穿透 ＞＞＞ , less/sass : /deep/)
m0_57142556的博客
06-10 427
项目中如何修改element-ui的默认样式(去除scoped,样式穿透 >>> , less/sass : /deep/) 我们在vue中引入第三方组件库时,组件中style样式中的scoped会成为我们修改样式的阻碍,要想修改css样式,并且不影响全局样式,有三种解决方法： 方法一: 在修改css样式style标签里,把它的scoped属性去掉,然后在这个标签的内容里面写需要修改的element-ui默认css样式(element-ui中标签设置样式都是前面加.的): &l
利用深度/deep/深度修改组建的样式
jokren的博客
01-10 7933
利用深度/deep/深度修改组建的样式 1. :host /deep/ .classname{ } 2.#idName /deep/ .classname{ }
/deep/ --------------- less深度作用域
热门推荐
CaseyWei
03-30 1万+
https://vue-loader.vuejs.org/zh/guide/scoped-css.html#子组件的根元素 深度作用选择器 如果你希望scoped样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用>>>操作符： <style scoped> .a >>> .b { /* ... */ } <...
CSS中的深度选择器 deep 详解
最新发布
exlink2012的专栏
12-19 867
在Vue等框架中，当我们使用组件作用域样式（Scoped CSS）时，有时需要修改子组件内部的样式。这时就需要用到深度选择器。深度选择器是在使用组件作用域样式时的重要工具，它让我们能够在不破坏组件封装的前提下修改子组件样式。但应该谨慎使用，优先考虑其他更好的样式解决方案。
使用deep修改前端框架中的样式
m0_72167535的博客
07-02 1162
使用deep修改前端框架中的样式
/deep/修改Element-ui的样式
weixin_52213331的博客
05-12 918
通过/deep/深度修改Element-ui的样式内容 为要修改的组件标签的类名进行样式修改，可以保留 <style> 标签的 scoped 属性。 //使用/deep/修改Element内部样式 /deep/.el-input_inner { border-radius : 26px; width: 286px; height: 38px; padding: 2px 10px 2px 13px; font-family:'等线 Regular',"
less深度作用域/deep/
weixin_30642267的博客
09-18 2975
1 <style lang="less" scoped> 2 .text-box { 3 /deep/ input { 4 width: 166px; 5 text-align: center; 6 } 7 } 8 </style> 有些像 Sass 之类的预处理器无法正确解析>>>。这种情况下你可以使用...
27、项目中如何修改element-ui、vant-ui的默认样式 （去除scoped,样式穿透 ＞＞＞ , less/sass : /deep/）
派大星儿的博客
06-10 961
项目中如何修改element-ui的默认样式 （去除scoped,样式穿透 >>> , less/sass : /deep/） 解决方法： 1、在原来的css样式下面，新编写一个不带scoped属性style，里面写需要修改的element-ui默认css样式。 ——————可以解决问题—————— 缺点：这样设置的是全局样式，意思就是如果你的项目里面有多个css需要修改，那么这么设置，两个地方都会被改变。 2、scss 模式 使用 >>> 箭头穿透 父类（或者更高级）
Vue scoped、style深度选择器 ＞＞＞、/deep/（sass/less）、v-deep
muzidigbig的博客
11-16 3190
css一直有个令人困扰的作用域问题：即使是模块化编程下，在对应的模块的js中import css进来，这个css仍然是全局的。为了避免css样式之间的污染，vue中引入了scoped这个概念。在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件。通过设置该属性，使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。
使用/deep/修改element-ui组件默认样式
科技向善
03-22 3843
修改方式 类名 /deep/ elementui 类名
前端：css less语法 /deep/ 深度影响的用法
classic0608的博客
05-15 6431
如果去掉scoped的话就会影响全局样式，但是加上scoped又不能在当前组件修改子组件的样式，这个时候就可以使用 /deep/ 了。这样做的原理是通过在打包的时候给每个样式都添加一个独一无二的hash值，从而避免父组件对子组件的样式的影响。设置了上述scoped的话，如果想要在父组件中修改子组件的样式时应该怎么样做呢？来避免父组件对子组件的影响，添加了之后只能修改当前组件的样式。css中通常会在 style 标签内添加。除了 /deep/ 以外，也可以实现同样的效果。
/deep/在vue中的使用，修改第三方组件样式
pon的博客
03-30 1698
如何避免修改全局样式，破坏整体样式的使用 在开发中遇到一个问题，vue项目结合element ui使用，但是element ui的样式不一定符合我们的需求，这时我们就需要改变它的样式。如果直接修改element-ui的公共样式文件的话，就会造成全局样式的改变。如何能够在某个特定的组件中修改第三方组件的样式呢，使得我们修改的第三方组件样式只在这个组件中起作用，如如修改element-ui中menu......
less深层改变element-ui的Pagination组件样式
weixin_45890764的博客
04-30 1088
场景： 在yy论坛实现的过程中，我们需要在底部整一个分页，但是element-ui并没有提供改变样式的参数，直接就是一个background，加上就是显示背景色，不加就是不显示，但是如果我们想要改变颜色该怎么办？ ::v-deep 就拿我们分页器举例： 我们先去找到改变哪个样式 然后使用::v-deep深层改变样式，记得加上scoped,否则不生效。 <style lang="less" scoped> ::v-deep { .el-pagination.is-background .el
深度选择器——vue或react中修改组件样式的方法
杜永康的博客
06-14 5613
6.权重问题，因为这种选择器的使用，具有穿透性，即使是引入的组件，通过f12找到元素类名，可以通过这样的方式修改其样式，但要注意，这边修改一个样式，其他地方有的样式也可能会变，这就一定要选择。⭐⭐使用 className 和全局 CSS 样式表：在组件模板中使用 className 属性来设置类名，然后在全局 CSS 样式表中定义对应的样式。⭐⭐使用 class 属性和全局 CSS 样式表：在组件模板中使用 class 属性来设置类名，然后在全局 CSS 样式表中定义对应的样式。
vue样式穿透（::v-deep，/deep/的使用）
qq_37493515的博客
06-10 6315
vue样式穿透（::v-deep，/deep/的使用）
【脸脸酱】css /deep/ 深度选择器的用法（在scoped文件修改外部组件样式）
qq_42557882的博客
06-20 2161
/deep/应用场景: (1)引用了第三方组件库，只需要在当前页面修改第三方组件库的样式以做到不污染全局样式。通过在样式标签上使用scoped达到样式只制作用到本页面。但有时又需要调整组件的样式，在含有scoped的style里里面在写样式对子组件是不生效的。(以前都是再加一个不含scoped的style标签，通过外层组件添加唯一class来区分组件，修改各种第三方组件的样式。) (2)在父组件中的样式无法修改子组件的样式这时可以使用深度作用选择器 /deep/; 上图是修改ant-des..
【vue scoped 样式修改 】框架或插件组件样式更改及/deep/ 警告
qq_35181466的博客
11-20 1036
在做vue项目的时候，很多人应该已经碰到在vue 组件中，style 局部修改样式更改不了 <!-- 这个是 B 组件 --> <template> <div> <h1 class="my">我是B组件</h1> </div> </template> <!-- A组件 --> <tem......
::v-deep 和 /deep/深度修改
weixin_41127362的博客
05-11 573
.swiper-right { display: flex; justify-content: flex-start; & > .swiper-pagination1 { width: 50px; display: flex; flex-direction: column...
如何修改element plus的组件样式？
10-25
- 将自定义的样式添加到项目的全局样式表（例如`main.css`或`.vue`文件中的`<style lang="scss">`部分），这样可以直接覆盖Element Plus的默认样式。使用`:deep()`伪类（在Sass里是`~`）可以让样式穿透组件树。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值