Element-UI修改样式不影响其他组件_elementui中的style会影响其他文件-优快云博客

本文链接：https://blog.youkuaiyun.com/ssjdoudou/article/details/113770329

本文介绍了一种在 Vue.js 中为特定组件定制弹框样式的解决方案，通过包裹额外的 div 并利用深度选择器来实现样式隔离，确保不影响其他组件的弹框样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求描述

需要修改某一个页面（组件）的弹框，又不能影响其他组件的弹框样式

然而不能在<style scoped></style>中直接修改，因为不生效

也不能在<style></style>中修改，因为会影响其他组件

方法

在弹框样式外面再套一个div，使用vue深度选择器。

<div class="wrapper">
	<el-dialog class="pop_dialog" title="" :visible.sync="wuhan" width="35%"
	center show-close="false" height="100%">
		<!-- <el-image-->
		<!-- style="width: 240px; height: 380px"-->
		<!-- :src="url"-->
		<!-- :fit="fill">-->
		<!-- </el-image>-->
		<vue-typed-js :strings="['Welcome to my Vue.js blog','Enjoy yourself']"
		:typeSpeed="100" :loop="true" @onComplete="doSmth()">
			<h1 class="typing">
			</h1>
		</vue-typed-js>
		<!-- <span slot="footer" class="dialog-footer">-->
		<!-- <el-button @click="wuhan=f alse">取 消</el-button>-->
		<!-- <el-button type="primary" @click="wuhan=f alse">确 定</el-button>-->
		<!-- </span>-->
	</el-dialog>
</div>

<style scoped>
.wrapper >>> .el-dialog__body {
  background-color: black !important;
  color: black;
  height: 100%;
}
.wrapper >>> .el-dialog__header {
  background: black;
}
</style>