vue裡面父元件如何修改子元件樣式

2021-08-20 20:33:03 字數 617 閱讀 4673

一去掉 scoped

二混用本地和全域性樣式

三使用深度作用選擇器

在使用 vue 的開發中,我們有時會引用外部元件,包括 ui 元件(elementui、iview)。

/* 全域性樣式 */

style>

scoped>

/* 本地樣式 */

style>

我們把 需要修改子元件的樣式 寫在上面那個全域性樣式裡面

三、使用深度作用選擇器

如果你希望 scoped 樣式中的乙個選擇器能夠作用得「更深」,例如影響子元件,你可以使用 >>> 操作符:

有些像 sass 之類的預處理器無法正確解析 >>>。這種情況下你可以用 /deep/ 操作符取而代之 —— 這是乙個 >>> 的別名,同樣可以正常工作。

ok,主要內容就是以上幾點。

需要額外補充的是:

1、通過 v-html 建立的 dom 內容不受作用域內的樣式影響,但是你仍然可以通過深度作用選擇器來為他們設定樣式

2、css 作用域不能代替 class

3、在遞迴元件中小心使用後代選擇器

感謝分享

vue裡面父元件如何修改子元件樣式

2018年01月17日 16 44 50 閱讀數 3462 在使用 vue 的開發中,我們有時會引用外部元件,包括 ui 元件 elementui iview 當有些像 sass 之類的預處理器無法正確解析 這種情況下你可以用 deep 操作符取而代之 這是乙個 的別名,同樣可以正常工作。ok,主要...

vue裡面父元件如何修改子元件樣式

在使用 vue 的開發中,我們有時會引用外部元件,包括 ui 元件 elementui iview 當我們把 需要修改子元件的樣式 寫在上面那個全域性樣式裡面 三 使用深度作用選擇器 如果你希望 scoped 樣式中的乙個選擇器能夠作用得 更深 例如影響子元件,你可以使用 操作符 有些像 sass ...

vue裡面父元件如何修改子元件樣式

在使用 vue 的開發中,我們有時會引用外部元件,包括 ui 元件 elementui iview 當我們把 需要修改子元件的樣式 寫在上面那個全域性樣式裡面如果你希望scoped樣式中的乙個選擇器能夠作用得 更深 例如影響子元件,你可以使用 操作符 有些像 sass 之類的預處理器無法正確解析 這...