iview和elementUI組件樣式覆蓋無效

iview和elementUI是我們?cè)谟胿ue開發(fā)項(xiàng)目時(shí)比較常用到的ui組件，在我們使用第三方UI組件庫開發(fā)時(shí)有時(shí)需要對(duì)這些組件進(jìn)行一些樣式修改。

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

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

不推薦使用，因?yàn)槿绻麤_突會(huì)導(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>

然而最近谷歌瀏覽器對(duì)于/deep/貌似不太友好，控制臺(tái)提示/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ā)時(shí)，在大哥定好全局樣式之后，我們個(gè)人頁面的開發(fā)中是不可以影響到全局樣式的，是不可以的?。ú蝗粫?huì)被罵的，就算不被罵，當(dāng)你辛辛苦苦改出一個(gè)樣式的時(shí)候，一回頭，發(fā)現(xiàn)你沒動(dòng)，但是樣式卻變了，你惱火么，我很惱火?。┧栽陂_發(fā)自己的頁面時(shí)，規(guī)定樣式范圍很重要。所以今天我們來講一下這個(gè)雖然很小但是很重要的知識(shí)點(diǎn)。

在進(jìn)行自己頁面開發(fā)需要獨(dú)立樣式時(shí)請(qǐng)這樣使用

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

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

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

在Element-UI中覆蓋樣式

Element-UI跟IView覆蓋的方式有點(diǎn)不同。在對(duì)Element-UI的樣式進(jìn)行覆蓋時(shí)，我們需要在

中進(jìn)行全局影響，而不可以在

中進(jìn)行修改。如果有需要的話，寫兩個(gè)，一個(gè)帶scoped，一個(gè)不帶也是可以的。

之后我們?cè)贓lement-UI的組件上給他加一個(gè)父層樣式選擇器

然后在樣式中這樣進(jìn)行覆蓋

這樣做，在進(jìn)行樣式判斷的時(shí)候會(huì)順著層次順序，只修改fatherclass下面的dialog的樣式，這樣就影響不到全局的樣式了。

在IView中覆蓋樣式

IView中，則需要在外層套接一個(gè)容器，直接在組件上增加父層樣式選擇器是不起作用的。

具體做法如下

我們?cè)诮M件外面套接了一層自己的容器，之后進(jìn)行樣式改變

這樣就成功了！可喜可賀，可喜可賀！

TIP：

1.定義的父層樣式選擇器可以不進(jìn)行樣式的編寫，因?yàn)樗麄冎皇菫榱朔奖阄覀兌x一個(gè)固定的影響區(qū)域。

2.如何找到我需要修改的樣式名稱

打開控制臺(tái)，去頁面上尋找

之后在

去尋找你需要修改的樣式，調(diào)節(jié)好之后直接把樣式復(fù)制到你的代碼中就可以了。

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