我有一個使用一堆 Web 組件的Bootstrap 5應用程式，并且所有組件都使用 Bootstrap 5。我需要在使用所有這些 Web 組件的父級內部動態自定義主題。我的基本結構是這樣的：
<div>
<div>I'm the wrapper around many web components</div>
<abc-comp />
<xyz-comp />
</div>
我希望能夠通過在消費者中設定 Bootstrap 的變數abc-comp來穿透影子 DOM。xyz-comp
我看到 Bootstrap 5 有CSS 變數，所以我試圖通過在我自己的 CSS:root樣式中設定它們來覆寫這些變數，如下所示：
:root {
--bs-primary: tomato;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<button class="btn btn-primary">
Why is my color not tomato?
</button>如何在我自己的樣式表中設定 Bootstrap 的 CSS 變數，在這些樣式表中我使用了許多都將 bootstrap 作為依賴項的 Web 組件？
uj5u.com熱心網友回復：
您使用的 Bootstrap 版本顯然不支持通過自定義變數進行自定義。至少用于自定義按鈕顏色。嘗試使用目前為測驗版的 v. 5.2： https ://getbootstrap.com/docs/5.2/getting-started/introduction/
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" />
<style>
.btn-primary {
--bs-btn-bg: tomato;
--bs-btn-border-color: tomato;
}
</style>
<button class="btn btn-primary">
I like tomato!
</button>uj5u.com熱心網友回復：
我不確定它是否有幫助...但是您可以在 bootstrap 檔案夾中編輯它位于 node_module 檔案夾中的 sass 檔案。
他們有很多變數，您可以將您的樣式添加為標準。
例如，您的顏色。
uj5u.com熱心網友回復：
這基本上是Bootstrap 的副本：設定自定義顏色
:root CSS 變數是只讀的，不能在“運行時”更改。做你想做的唯一方法是使用 SASS 重新定義 CSS 變數
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/477019.html