Vue页面内修改外部引进组件CSS(局部修改)

- 日理万妓 2022-11-03 15:25 22阅读 0赞

### 前言 ###

在实际的Vue项目中，我们经常需要引进一些外部组件，elementUI, ant-designed，之类的，而且我们总需要在某些下，对这些个组件的某些样式进行修改（不影响全局样式的情况下修改）

### 实现 ###

第一种  
在选择器前面加个id选择器来限制

<template>
    	<div id ="wrapper">
    		<el-dialog></el-dialog>
    	</div>
    </template>
    <style>
    #wrapper .el-dialog {
    	width: 800px
    }
    </style>

第二种  
在选择器前面加个类选择器来限制

<template>
    	<div class ="wrapper">
    		<el-dialog></el-dialog>
    	</div>
    </template>
    <style>
    #wrapper .el-dialog {
    	width: 800px
    }
    </style>

第三种  
在vue中，我们为了避免父组件的样式影响到子组件的样式，会在style中加`<style scoped>`，这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候，就不会影响到子组件的样式。如果让父组件的样影响到子组件，那么我们就需要/deep/

<template>
    	<div id="wrapper">
    		<el-dialog></el-dialog>
    	</div>
    </template>
    <style scoped>
    /deep/ .el-dialog{
    width:800px
    }
    </style>
    // 当然了把 /deep/ 换成 >>>，也可以达到同样的效果

注意：  
1.前两种不能加上scoped不然不会生效  
2.el-dialog 中有个append-to-body的属性，在对局部组件的样式进行修改时，一定要注意这个属性的值要为false，不然无法生效  
3./deep/ 和 >>> 不能用在 lang = ‘scss’ 的 style 内。

发表评论取消回复

表情：

评论列表（有 0 条评论，22人围观）

还没有评论，来说两句吧...

相关阅读

相关 WebView之修改页面JS、CSS

1、背景混合开发在移动端已经火了很多年了，说起混合开发，就不得不提起Android的WebView，用WebView来加载html页面及进行交互也早已不再是什么新鲜事了，现

悠悠/ 2023年10月04日 17:26/ 0 赞/ 57 阅读

相关 vue中动态修改组件样式

今天遇到了个难题，在次记录一下。一般我们vue中动态修改一个组件的样式会用 :class :style等方法。今天我在修改一个组件样式的时候发现覆盖不了原有样式

客官°小女子只卖身不卖艺/ 2023年02月23日 12:28/ 0 赞/ 75 阅读

相关 JeeSite4修改内置页面

官方文档：[传送门][Link 1] 一、修改内置页面的项目名称、版本号 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk

怼烎@/ 2023年02月20日 06:19/ 0 赞/ 165 阅读

相关 php 方法修改外部变量,PHP实现函数内修改外部变量值的方法示例

本文实例讲述了PHP实现函数内修改外部变量值的方法。分享给大家供大家参考，具体如下：直接上代码，如下：$a\_str = "ab";function change\_val

ゝ一世哀愁。/ 2023年01月13日 10:52/ 0 赞/ 140 阅读

相关 vue 局部组件

vue 局部组件小案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

淩亂°似流年/ 2022年12月02日 15:04/ 0 赞/ 236 阅读

相关 VUE修改页面的标题

重点代码 meta:{ title:'首页'} 完整代码 import Vue from 'vue' import Router from

﹏ヽ暗。殇╰゛Y/ 2022年11月29日 03:20/ 0 赞/ 214 阅读

相关 vue中动态引进组件、动态引进js模块文件

本文主要介绍vue内容如下： 1、在.vue文件中动态引进组件 2、在.vue文件中动态引进js模块文件一、动态引进组件动态引进组件原因：在实际业务中，比如订

秒速五厘米/ 2022年11月11日 13:03/ 0 赞/ 620 阅读

相关 Vue页面内修改外部引进组件CSS(局部修改)

前言在实际的Vue项目中，我们经常需要引进一些外部组件，elementUI, ant-designed，之类的，而且我们总需要在某些下，对这些个组件的某些样式进行修改（

- 日理万妓/ 2022年11月03日 15:25/ 0 赞/ 23 阅读

相关 PHP 函数内修改外部变量值

直接上代码，如下： $a_str = 'ab'; function change_val(){ global $a_str; // 通过设置全局变量

左手的ㄟ右手/ 2022年05月14日 11:38/ 0 赞/ 243 阅读

相关修改iframe页面中的css

在一个html页面中(a.html)使用iframe引入另外一个页面（b.html），有时候我们需要修改ifram页面的样式，该如何操作呢？假设我们没有修改b.html页面的权

太过爱你忘了你带给我的痛/ 2021年09月02日 03:31/ 0 赞/ 513 阅读