快捷導(dǎo)航

小程序自定義組件全局樣式不生效的解決方法

更新時(shí)間：2021年08月06日 09:36:07 作者：Skuld_yi

在使用原生框架開發(fā)小程序時(shí)遇到一個(gè)問題，在 app.wxss 中定義的全局樣式在自定義組件中不生效，本文就詳細(xì)的介紹一下，感興趣的可以了解一下

太長(zhǎng)不看版

在組件的 json 文件中添加如下配置，全局樣式即可生效。

// component.json
"styleIsolation": "apply-shared"

如果偏好在 js 文件中進(jìn)行配置，或版本號(hào) < 2.10.1，也可以寫在 js 文件中，效果相同。

// component.js
Component({
  options: {
    styleIsolation: 'apply-shared'
  }
})

如果版本號(hào) < 2.6.5，可以使用如下配置代替 styleIsolation: 'apply-shared'

// component.js
Component({
  options: {
    addGlobalClass: true
  }
})

組件樣式隔離

組件的 styleIsolation 有三個(gè)可選值：

isolated：默認(rèn)值，組件內(nèi)外的樣式互不影響
apply-shared：接收外部（包括父頁(yè)面和全局）的樣式，但組件內(nèi)的樣式不影響外部
shared：接收外部樣式，同時(shí)組件內(nèi)的樣式會(huì)共享到頁(yè)面

demo 試驗(yàn)

為了更直觀，寫了一個(gè) demo 進(jìn)行了簡(jiǎn)單試驗(yàn)。

定義一個(gè)組件comp，并在頁(yè)面 index 中引入組件：

<!-- comp.wxml -->
<view class="test1 testbox">comp1</view>
<view class="test2 testbox">comp2</view>
<view class="test3 testbox">comp3</view>

<!-- index.wxml -->
<comp />
<view class="test3 testbox">index3</view>

然后在全局、頁(yè)面、組件中分別定義 test1, test2, test3 的顏色為紅、綠、藍(lán)色（省略了 testbox 的樣式）：

/* app.wxss */
.test1 {
  background-color: lightpink;
}

/* components/index.wxss */
.test2 {
  background-color: lightgreen;
}

/* components/comp.wxss */
.test3 {
  background-color: lightblue;
}

之后對(duì)組件的 styleIsolation 屬性進(jìn)行不同取值，結(jié)果如下：

可以看到，默認(rèn)模式 isolated下，父頁(yè)面和全局樣式都不生效；apply-shared 模式下，頁(yè)面和全局樣式能作用到組件中；shared 模式下組件樣式還會(huì)反過來作用到父頁(yè)面上。

優(yōu)先級(jí)

另外，經(jīng)過測(cè)試，對(duì)于相同的選擇器，樣式的優(yōu)先級(jí)為組件樣式 > 頁(yè)面樣式 > 全局樣式，對(duì)于組件來說這基本符合直覺。不過如果組件應(yīng)用了 shared，那么其中樣式也會(huì)覆蓋頁(yè)面中的樣式，這就有點(diǎn)奇怪。

綜上，個(gè)人建議除非特殊需要，否則最好慎用 shared 模式，并且盡量減少選擇器沖突和相互覆蓋，以免造成不必要的靈異事故。對(duì)于需要共享的樣式，可以根據(jù)情況抽取到全局或采用引入 css 文件的方式實(shí)現(xiàn)。

頁(yè)面的隔離配置

由于小程序的頁(yè)面實(shí)際上也是組件，所以同樣可以設(shè)置 styleIsolation 屬性，并且與自定義組件不同的是頁(yè)面的默認(rèn)取值為 share，因此頁(yè)面中默認(rèn)可以應(yīng)用全局樣式。

另外，對(duì)于頁(yè)面還額外增加了三個(gè)屬性取值。雖然文檔中有各自的描述，但我經(jīng)過試驗(yàn)后感到十分迷惑，完全沒有搞懂各自的確切作用和區(qū)別；甚至還有頁(yè)面設(shè)置為 isolated / page-isolated 之后頁(yè)面自己的樣式都失效了這種神秘 bug，可能是實(shí)現(xiàn)上還存在問題。所以建議不要隨便更改頁(yè)面的 styleIsolation 配置，感興趣的可以點(diǎn)擊文末鏈接自行研究試驗(yàn)。

只有一個(gè)還算比較確定的選項(xiàng)，配置 page-shared 之后，頁(yè)面（以及其中的組件）將屏蔽 app.wxss 中的全局樣式，并且其他方面的影響應(yīng)該較小，如果有需要可以嘗試。