Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >mpvue——修改第三方组件样式

mpvue——修改第三方组件样式

作者头像
思索
发布于 2024-08-16 02:25:36
发布于 2024-08-16 02:25:36
9100
代码可运行
举报
运行总次数:0
代码可运行

前言

我们都知道在vue中可以定义多个<style>,一般为了防止全局污染,我们会使用<style scoped>代表这里面的css样式只在本页面生效。

全局

这个当时测试是直接写,没有加层级,然后样式没生效,后面就直接删除,在私有的里面进行穿透修改了!如果要测试最好加本页面的大类,不然会污染全局!!!所以还是推荐私有穿透吧。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style >

</style>

私有

使用/deep/进行穿透,在mpvue中使用>>>穿透,编译会报错

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.form-area {
      width: 100%;
      bottom: 1.88rem;
      .form-wrap {
        width: 340px;
        position: relative;
        left: 20px;
        .form-item {
          width: 100%;
          height: 50px;
          margin: 5px 0;
          border-radius: 10px;
          background-color: #fff;
        /deep/.van-cell {
            width: 240px !important;
            position: none !important;
          }
        }
      }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-02-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
解决使用vue-awesome-swiper组件分页器样式设置失效问题
 给父标签设置一个id,例如父标签id="parent",在sass/less中使用/deep/样式穿透,例:
生南星
2019/09/17
4.7K0
解决使用vue-awesome-swiper组件分页器样式设置失效问题
7b2美化-首页文章动态边框
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
小狐狸说事
2022/11/16
5560
7b2美化-首页文章动态边框
元宵节给网站挂个灯笼
元宵节将至,给网站挂个灯笼,也增加点节日气氛。喜欢的朋友们可以自己复制代码调试一下,样式也可以自己修改。
特特法爷
2022/02/14
4840
给WordPress或网站内添加新年挂灯笼特效
源码及教材源自知更鸟:http://zmingcx.com/hanging-lantern.html
AlexTao
2020/02/17
1.4K0
动物主题网页设计(小白必看)
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者:
IT司马青衫
2022/08/14
3800
动物主题网页设计(小白必看)
wordpress后台登录界面美化
@font-face { font-family:fzz; src: url('https://img.zuanmang.net/ttf/fzz.ttf'); } 模板从吾爱破解论坛搬的,原作者分享出来的图片都丢失了,样式也有点问题。写了个圆角样式及添加阴影,以及透明显示。(本想用高斯模糊奈何这个结构全都都会变成毛玻璃效果。)用PHP随机显示图片做背景,实现后台登录背景随机刷新。
AlexTao
2019/12/13
6.5K0
wordpress后台登录界面美化
【CodeBuddy】三分钟开发一个实用小功能之:可爱风空调遥控器
我正在参加CodeBuddy「首席试玩官」内容创作大赛,本文所使用的 CodeBuddy 免费下载链接: 腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴
Jimaks
2025/05/22
1440
【CodeBuddy】三分钟开发一个实用小功能之:可爱风空调遥控器
vue操作dom元素的三种方法
vue中的ref是把当前dom元素 “ 抽离出来 ” ,只要通过 this.$refs就可以获取到
我不是费圆
2020/09/22
2.5K0
html组合css实现音乐排行版播放器
菜菜有点菜
2024/05/30
3070
html组合css实现音乐排行版播放器
为什么使用scoped就可以使组件的样式不相互污染?
Vue中的scoped属性的效果主要是通过PostCss实现的。以下是转译前的代码:
程序媛夏天
2024/01/18
2480
HTML+CSS+JS 实现登录注册界面[通俗易懂]
鉴于小伙伴们没有csdn积分,我把代码压缩成了一个压缩包,放在了gitee上面,需要的请点击下载 点击下载
全栈程序员站长
2022/09/13
26.2K0
HTML+CSS+JS 实现登录注册界面[通俗易懂]
Halo新年灯笼
前言 这不是快过年了博客整点新年效果啊我记得见到过一个灯笼不多说直接来 这灯笼好听好看的配置到halo当中 一、使用halo后台编辑你对应的模板 首页-》外观-》主题编辑 拉到最下面编辑 拉到最底下复制一份 更改为你想要的名称(用于按钮控制) 示例: new_year: name: new_year label: 新年灯笼 type: switch data-type: bool default: false d
杨不易呀
2022/01/19
5920
Halo新年灯笼
vue中修改第三方组件css
css中不使用scoped进行私有化控制,而是采用每个类用自己的类名(class="aroundPriceInput")称控制
程序员不务正业
2018/12/18
1.4K0
Hexo-Butterfly主题修改记录-2
添加跳动的心 首先在博客引入这个开源css \themes\butterfly\layout\includes\footer.pug,找到此段代码:
十玖八柒
2022/08/01
1.7K0
Hexo-Butterfly主题修改记录-2
vue项目小点(二)
1.解决使用vue-awesome-swiper组件分页器pagination样式设置失效问题
生南星
2019/10/08
1.5K0
vue项目小点(二)
实现网站中增加春节灯笼动态效果
这篇文章最后修改于 2022-06-23 日,距今已有 153 天,请注意甄别内容是否已经过时!
羽翼博客
2022/11/28
5440
实现网站中增加春节灯笼动态效果
【字节前端青训营】跟着月影学JavaScript—— 前端代码优化三大原则之组件封装,用原生JS写一个轮播图并封装
组件封装对于学过React或者Vue框架的同学应该都不陌生,就我个人而言我之前的原生JS基础并不太是太好,一开始接触前端是因为参加学校的实验室做React Native项目,我是稍微了解一下原生JS之后就直接学React了,对于React组件的封装已经是比较熟悉了,而封装原生JS组件对我来说还是很新鲜的。上完这次课,自己跟着把代码敲了一遍真的是受益匪浅,让我对框架的理解又加深了一步,希望大家有时间的话都好好做一下这个轮播图组件,很棒。
henu_Newxc03
2022/05/05
1.9K0
【字节前端青训营】跟着月影学JavaScript—— 前端代码优化三大原则之组件封装,用原生JS写一个轮播图并封装
CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位
web前端开发者最最注的内容是三个:HTML、CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能
张果
2018/01/04
1.8K0
CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位
常用的CSS样式
自己平时整理的一些常用的 CSS 样式 设置透明度 在IE6中使用 filter: alpha(opacity = 40); 在其他浏览器中使用 opacity: 0.4; 设置行高 /*\9表示兼容所有的IE浏览器*/ line-height: 35px\9; 清除浮动 .clearfix:after { content: ''; height: 0; clear: both; overflow: hidden; visibility: hidden;
用户3880999
2023/04/13
8100
【UniApp】-uni-app-修改组件主题和样式
创建一个全新的项目,因为本文要修改组件主题和样式,所以这次创建项目选择 uni-ui 模板:
程序员NEO
2023/12/10
2.9K0
【UniApp】-uni-app-修改组件主题和样式
推荐阅读
相关推荐
解决使用vue-awesome-swiper组件分页器样式设置失效问题
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验