父组件里怎么修改第三方组件class样式

weixin_38058113 2019-08-03 08:26:17

请教各位大神，如果我想修改封装好的组件或者第三方组件的class样式，这个怎么实现

...全文

122 3 打赏收藏转发到动态举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

weixin_38081679 2019-08-05

打赏
举报

回复

一般写在全局样式文件里，在全局下进行覆盖

weixin_38085655 2019-08-05

打赏
举报

回复

有两种方式：婉约派做法： Clone 第三方库 -> 改源码 -> 重新编译 -> 替换掉 node_modules 下的文件。这种方式不推荐。太麻烦。豪放派做法：简单粗暴，覆盖样式。例如： styles/index.scss: .el-button { color: #42b987 } 然后再在 main.js 中导入： import '@/styles/index.scss'

weixin_38071069 2019-08-05

打赏
举报

回复

1.浏览器里查看元素，看看这个组件的class，包括层级 2，复制下改样式 3，通过important，来强制覆盖。第一点注意一下：如果第三方是 .classA div ul{color:red} 得全部复制 .classA div ul{color:green!important}

一、深度作用选择器（ >>> ）严格来说，这个应该是vue-loader的功能。”vue-loader”: “^12.2.0” 在项目开发中，如果业务比较复杂，特别像中台或B端功能页面都不可避免的会用到第三方组件库，产品有时会想对这些组件进行一些UI方面的定制。如果这些组件采用的是有作用域的CSS，父组件想要定制第三方组件的样式就比较麻烦了。深度作用选择器( >>> 操作符)可以助你一臂之力。如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>

在开发的过程中，我定义了一个公共组件，但在我的设计稿上面，这个公共组件距离内容的margin-bottom是不同的，所以我需要在父组件引用这个组件的时候，在父组件的css中设置他的样式，查阅小程序文档，找到了外部样式，使用方式如下：子组件定义被外部使用类子组件wxml：wxml中定义将要被外部使用的class名称 my-class <view class="activityPrivilege my-class"> <image class="activityPrivilege-

修改第三方组件样式 1.使用全局样式但是这种方法会和其他样式冲突 **2. 在拥有scope属性的style中使用 >>> ** >>>是vue的深度选择器 3. 通过less以及sass的方式来实现穿透 <style scoped lang="less"> 　.xxx{ 　　/deep/ .el-checkbox__inner{ // less语法要通过/deep/ 来找到子级的类　　　border-radius: 50%; 　　} 　} &l

为了提高开发效率，我们经常会使用第三方组件库，例如Ant Design，Vant，Element等。一般组件库会为我们提供比较美观的样式供开发者选择，但是当提供的组件样式不满足需求时，我们需要能够自己来修改组件的样式。例如下面这个例子，我用到了Vant组件库中的Navbar组件，这是一个标题组件，默认的样式是这样的：现在我需要将组件的背景改为淡蓝色，文字改为白色。首先利用谷歌浏览器的元素选择工具，查找到决定组件背景样式的clas...

在vue项目中，我们会用到很多第三方组件库，当我们使用第三方组件库的时候，有时会遇到需求样式与封装的第三方组件样式有偏差。这时我们就要去改第三方的样式。在前段时间做项目就遇到了这个问题，刚开始想着在组件标签上加一个class或者id，然后通过css选择器进行style样式修改。然后我尝试了好多次，发现改不动！！！！。最后，去网上参考了一些方案，发现改不动的原因是出现在style标签中的scoped属性上。所以我想到的是去掉scoped属性。但是当我去掉scoped属性的时候，发现其他组件的样式，有一些

其他技术讨论专区

476

社区成员

790,963

社区内容

发帖

与我相关

我的任务

其他技术论坛（原bbs）

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章