目錄

• 太長不看版
  
• 元件樣式隔離
  
• demo 試驗
  
• 優先順序
  
• 頁面的隔離配置
  
• 參考資料
  

在使用原生框架開發小程式時遇到一個問題，在 app.wxss 中定義的全域性樣式在自定義元件中不生效。後來發現是由於小程式元件樣式隔離的配置導致的。

太長不看版

在元件的 on 檔案中新增如下配置，全域性樣式即可生效。

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

如果偏好在 js 檔案中進行配置，或版本號 < 2.10.1，也可以寫在 js 檔案中，效果相同。

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

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

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

元件樣式隔離

元件的 styleIsolation 有三個可選值：

• isolated：預設值，元件內外的樣式互不影響
• apply-shared：接收外部（包括父頁面和全域性）的樣式，但元件內的樣式不影響外部
• shared：接收外部樣式，同時元件內的樣式會共享到頁面

demo 試驗

為了更直觀，寫了一個 demo 進行了簡單試驗。

定義一個元件comp，並在頁面 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>

然後在全域性、頁面、元件中分別定義 test1,test2,test3 的顏色為紅、綠、藍色（省略了 testbox 的樣式）：

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

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

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

之後對元件的 styleIsolation 屬性進行不同取值，結果如下：

可以看到，預設模式 isolated下，父頁面和全域性樣式都不生效；apply-shared 模式下，頁面和全域性樣式能作用到元件中；shared 模式下元件樣式還會反過來作用到父頁面上。

優先順序

另外，經過測試，對於相同的選擇器，樣式的優先順序為 元件樣式 > 頁面樣式 > 全域性樣式，對於元件來說這基本符合直覺。不過如果元件應用了 shared，那麼其中樣式也會覆蓋頁面中的樣式，這就有點奇怪。

綜上，個人建議除非特殊需要，否則最好慎用 shared 模式，並且儘量減少選擇器衝突和相互覆蓋，以免造成不必要的靈異事故。對於http://www.cppcns.com需要共享的樣式，可以根據情況抽取到全域性或採用引入 檔案的方式實現。

頁面的隔離配置

由於小程式的頁面實際上也是元件，所以同樣可以設定 styleIsolation 屬性，並且與自定義元件不同的是頁面的預設取值為 share，因此頁面中預設可以應用全域性樣式。

另外，對於頁面還額外增加了三個屬性取值。雖然文件中有各自的描述，但我經過試驗後感到十分迷惑，完全沒有搞懂各自的確切作用和區別；甚至還有頁面設定為 isolaBogfzShluted / page-isolated 之後頁面自己的樣式都失效了這種神祕 bug，可能是實現上還存在問題。所以建議不要隨便更改頁面的 styleIsolation 配置，感興趣的可以點選文末連結自行研究試驗。

只有一個還算比較確定的選項，配置 page-shared 之後，頁面（以及其中的組http://www.cppcns.com件）將遮蔽 app.wxss 中的全域性樣式，並且其他方面的影響應該較小，如果有需要可以嘗試。

參考資料

微信官方文件 小程式

到此這篇關於小程式自定義元件全域性樣式不生效的解決方法的文章就介紹到這了,更多相關小程式元件全域性樣式不生效內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！