關(guān)于iview和elementUI組件樣式覆蓋無效問題及解決

更新時間：2022年09月13日 09:07:12 作者：zqian1994

這篇文章主要介紹了關(guān)于iview和elementUI組件樣式覆蓋無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

iview和elementUI組件樣式覆蓋無效

iview和elementUI是我們在用vue開發(fā)項目時比較常用到的ui組件，在我們使用第三方UI組件庫開發(fā)時有時需要對這些組件進行一些樣式修改。

為了vue頁面樣式模塊化，不對全局樣式造成污染，我們往往都會加入scoped屬性用來限制樣式的作用域，然而這也會導(dǎo)致當(dāng)我們修改部分ui組件樣式失效。為了避免這種情況，我們常用以下方式來解決。

新建一個不含scoped的style標(biāo)簽覆蓋組件樣式

不推薦使用，因為如果命名沖突會導(dǎo)致其他樣式覆蓋異常

<style scoped>
?? ?/*頁面樣式*/
</style>
// ui組件覆蓋
<style>
? .home .ivu-card-body {
? ? height: 345px;
? }
</style>

深度作用選擇器（ >>> ）

<style scoped>
.box >>> .content {
? font-size:20px;
}
</style>

/deep/ 預(yù)處理器less下使用

深度選擇器/deep/與>>>作用相同

<style scoped lang="less">
.select {
? ? ?/deep/ .ivu-card-body {
? ? ? ? width: 100%;
? ? ? }
? ? }
</style>

然而最近谷歌瀏覽器對于/deep/貌似不太友好，控制臺提示/deep/將要被移除。

[Deprecation] /deep/ combinator is no longer supported in CSS dynamic profile.It is now effectively no-op, acting as if it were a descendant combinator. /deep/ combinator will be removed, and will be invalid at M65. You should remove it. See https://www.chromestatus.com/features/4964279606312960 for more details.

所以我們也可以在less下另類調(diào)用>>>，如下：

// 采用的less的轉(zhuǎn)義和變量插值
<style scoped lang="less">
@deep: ~'>>>';
.select {
? ? ?@{deep} .ivu-card-body {
? ? ? ? width: 100%;
? ? ? }
? ? }
</style>

Element-ui與IView中的樣式覆蓋問題

在合作開發(fā)時，在大哥定好全局樣式之后，我們個人頁面的開發(fā)中是不可以影響到全局樣式的，是不可以的?。ú蝗粫涣R的，就算不被罵，當(dāng)你辛辛苦苦改出一個樣式的時候，一回頭，發(fā)現(xiàn)你沒動，但是樣式卻變了，你惱火么，我很惱火?。┧栽陂_發(fā)自己的頁面時，規(guī)定樣式范圍很重要。所以今天我們來講一下這個雖然很小但是很重要的知識點。

在進行自己頁面開發(fā)需要獨立樣式時請這樣使用

scoped字段的意義就是相當(dāng)于你在控制你的<div>容器時為了唯一識別而給他的一個id比如<div id="xxxx">。當(dāng)你給style加上scoped時，在編譯之后樣式就會帶上自己的id比如

這樣子之后，這個樣式就只屬于這個頁面了，不會影響到全局的樣式。

當(dāng)然，在自己編寫的容器中我們可以直接定義，但是在我們使用了其他的UI組件之后，我們會發(fā)現(xiàn)，在scoped中改變的樣式并不能影響到樣式了。因為我們是在全局中對其樣式進行引入的，所以在自己規(guī)定的小區(qū)域內(nèi)的改變并不能影響到他，但是直接寫一個<style></style>在這里面進行修改則又會影響到全局的樣式。接下來我們講一下解決方法。