快捷導(dǎo)航

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

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

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

iview和elementUI組件樣式覆蓋無(wú)效

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

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

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

不推薦使用，因?yàn)槿绻麤_突會(huì)導(dǎo)致其他樣式覆蓋異常

<style scoped>
?? ?/*頁(yè)面樣式*/
</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中的樣式覆蓋問(wèn)題

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

在進(jìn)行自己頁(yè)面開(kāi)發(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è)頁(yè)面了，不會(huì)影響到全局的樣式。

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