element組件中自定義組件的樣式不生效問題(vue scoped scss無效)

更新時間：2022年09月02日 11:05:09 作者：小劉加油！

這篇文章主要介紹了解決element組件中自定義組件的樣式不生效問題(vue scoped scss無效)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

element組件中自定義組件的樣式不生效

當(dāng)我們在項(xiàng)目中需要給element組件加上一些自定義樣式的時候，往往是不生效的。

這是因?yàn)?strong>Vue項(xiàng)目中使用第三方框架的時候，Vue中有scoped，聲明了樣式是在組件范圍內(nèi)生效的，避免了不同組件的樣式污染。

解決方法

1. 去掉scoped

這種方法確實(shí)可以實(shí)現(xiàn)效果，簡單粗暴，卻會造成不同組件樣式污染，不建議。

2. 使用 /deep/ 深度修改標(biāo)簽樣式

找到需要修改的 element標(biāo)簽的類名，然后在類名錢加上 /deep/ ，可以強(qiáng)制修改默認(rèn)樣式。這種方式可以直接用到有 scoped 屬性的 style 標(biāo)簽中

適用于改變element-ui的某個深層元素（比如el-input__inner）

// 強(qiáng)制修改級聯(lián)選擇框的默認(rèn)寬度
	.my .el-input__inner{
		border-radius: 30px;  /* 這個不起作用 */
	}
	.my /deep/ .el-input__inner{
		border-radius: 30px;  /* 這個起作用 */
	}

3. 使用深作用選擇器 >>>

這種 >>> 方式只能用在原生CSS語法中，不能在 css預(yù)處理器如less scss中直接使用

<style scoped>
	.my .el-input__inner{
		border-radius: 30px;/* 這個不起作用 */
	}
	.my >>> .el-input__inner{
		border-radius: 30px;/* 這些起作用 */
		border: 1px solid #eceef2;
		outline: 0;
	}
</style>

4. 在css預(yù)處理器中使用 >>> 方法

<style scoped lang='less'>
    @deep: ~'>>>';
      .box {
        @{deep} .title {
            ...
        }
      }
</style>

當(dāng)然，我們也可以在全局樣式表中為 >>> 取別名，那么就可以直接在頁面任何 style 標(biāo)簽中使用其別名如 @{data} 來修改頁面樣式了

注意：我在實(shí)際中發(fā)現(xiàn)，多個 @{data} 可以同級使用，但不能相互嵌套，否則將不會生效。如下圖，雖然 el-input__inner 在 el-input 標(biāo)簽內(nèi)部，但卻不可以直接嵌套使用。

5. 如果使用 /deep/ 報錯或者樣式?jīng)]有改變，則可以使用 ::v-deep

.conBox ::v-deep .el-input__inner{
   padding:0 10px;
}

::v-deep .el-dialog__footer{
 	background: #000;
 	padding: 0;
 	margin-top: 10px;
}

Element-UI修改樣式不影響其他組件

需求描述

需要修改某一個頁面（組件）的彈框，又不能影響其他組件的彈框樣式

然而不能在<style scoped></style>中直接修改，因?yàn)椴簧?/p>

也不能在<style></style>中修改，因?yàn)闀绊懫渌M件

方法

在彈框樣式外面再套一個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>

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: