首页 > 网络编程 > JavaScript > javascript类库 > vue.js > ElementUI修改默认样式

ElementUI如何修改el-cascader的默认样式

2023-12-21 09:21:01 作者：anqiaoyun

ElementUI 是一套ui组件库，目前最新版本 react 和 vue 等主流框架都有支持。该库默认主题色是天蓝色，若用于项目开发，难免遇到要需求修改其默认样式的情况，这篇文章主要介绍了ElementUI如何修改el-cascader的默认样式,需要的朋友可以参考下

ElementUI如何修改el-cascader的默认样式

Element UI 中的下拉弹窗是通过在整个body标签末尾动态添加div实现的，所以修改样式时，必须要定义全局样式才能实现样式覆盖，那怎样才能避免全局的样式污染呢？

解决办法：通过给组件添加自定义的 popper-class 属性来避免全局样式污染；

<el-cascader
    v-model="showOptions"
    style="height: 36px;width:260px"
    placeholder="显示选项"
    :options="optionsList"
    :props="props"
    collapse-tags
    clearable
    popper-class="dropDownPanel"
></el-cascader>

在这里插入图片描述

下拉框的样式设置：

<style>
.dropDownPanel{
    background: #123493;
    border: 1px solid rgba(57,106,254,1);
}
.dropDownPanel[x-placement^=bottom] .popper__arrow {
    display: none;
}
.dropDownPanel .el-cascader-menu {
    color: #fff;
    border-right: 1px solid rgba(57,106,254,1);
}
.dropDownPanel .el-cascader-node.in-active-path {
    color: #38B4C1;
    /* background: transparent; */
}
.dropDownPanel .el-cascader-node.is-active {
    color: #38B4C1;
}
.dropDownPanel .el-cascader-node:not(.is-disabled):focus, 
.dropDownPanel .el-cascader-node:not(.is-disabled):hover {
    background-color: #0C0F56!important;
}
</style>

样式修改

<style scoped>
/deep/ .el-tag.el-tag--info {
    background-color: #123493;
    border-color: rgba(57,106,254,1);
    color: #FFFFFF;
}
/deep/ .el-cascader__tags .el-tag:not(.is-hit) {
    border-color: rgba(57,106,254,1);
}
</style>

补充：

ElementUI 修改默认样式的几种办法

ElementUI 是一套ui组件库，目前最新版本 react 和 vue 等主流框架都有支持。该库默认主题色是天蓝色，若用于项目开发，难免遇到要需求修改其默认样式的情况，本文就基于vue 框架介绍几种修改 ElementUI 默认样式的办法。

面试官会问：怎样修改ElementUI的默认样式？
如何修改ElementUI样式？
回答：一共有三种方法：
1、内嵌法修改样式、通过:style修改，用于局部组件块
2、:class引用修改样式，通过:class修改，用于局部组件块
3、import导入修改样式
通过import导入样式文件，若在main.js中导入css 则表示全局引用。既可以用于局部组件块也可以用于全局组件
deep 穿透

一、内嵌法修改样式

通过:style修改，用于局部组件块

<el-button :style="selfstyle">默认按钮</el-button>
<script>
	export default {
		data() {
			return {
				selfstyle: {
					color: "white",
					marginTop: "10px",
					width: "100px",
					backgroundColor: "cadetblue"
				}
			};
		}
	}
</script>

二、:class引用修改样式

通过:class修改，用于局部组件块

<el-button :class="[selfbutton]">默认按钮</el-button>
<script>
	export default {
		data() {
			return {
				selfbutton: "self-button"
			};
		}
	}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
	.self-button {
		color: white;
		margin-top: 10px;
		width: 100px;
		background-Color: cadetblue;
	}
</style>

三、import导入修改样式

通过import导入样式文件，若在main.js中导入css 则表示全局引用。既可以用于局部组件块也可以用于全局组件

<el-button>和下面的el-button效果一样</el-button>
<el-button :class="[selfbutton]">默认按钮</el-button>
<script>
	import './button.css'
	export default {}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped></style>
/* button.css */ 
.el-button {
	color: white;
	margin-top: 10px;
	width: 100px;
	background-Color: cadetblue;
}
.self-button {
	color: white;
	margin-top: 10px;
	width: 100px;
	background-Color: cadetblue;
}
.self-button:hover {
	color: black;
	background-Color: whitesmoke;
}
</style>

以上就是我针对vue框架下的ElementUI 修改默认样式的方法

到此这篇关于ElementUI如何修改el-cascader的默认样式的文章就介绍到这了,更多相关ElementUI修改el-cascader默认样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

ElementUI如何修改el-cascader的默认样式