ElementUI如何修改el-cascader的默認樣式

更新時間：2023年12月21日 09:23:24 作者：anqiaoyun

ElementUI 是一套ui組件庫，目前最新版本 react 和 vue 等主流框架都有支持。該庫默認主題色是天藍色，若用于項目開發(fā)，難免遇到要需求修改其默認樣式的情況，這篇文章主要介紹了ElementUI如何修改el-cascader的默認樣式,需要的朋友可以參考下

ElementUI如何修改el-cascader的默認樣式

Element UI 中的下拉彈窗是通過在整個body標簽末尾動態(tài)添加div實現(xiàn)的，所以修改樣式時，必須要定義全局樣式才能實現(xiàn)樣式覆蓋，那怎樣才能避免全局的樣式污染呢？

解決辦法：通過給組件添加自定義的 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 等主流框架都有支持。該庫默認主題色是天藍色，若用于項目開發(fā)，難免遇到要需求修改其默認樣式的情況，本文就基于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默認樣式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: