如何使用 :root 设置 Bootstrap 5 的 CSS 变量？

Question

我有一个 Bootstrap 5 应用程序，它使用了一堆 Web 组件，并且所有组件都使用 Bootstrap 5. 我需要在使用所有组件的父级内部动态自定义主题这些网络组件。我的基本结构是这样的：

<div>
  <div>I'm the wrapper around many web components</div>
  <abc-comp />
  <xyz-comp />
</div>

我希望能够通过在消费者中设置 Bootstrap 的变量来穿透 abc-comp 和 xyz-comp 的影子 DOM。

我看到 Bootstrap 5 有 CSS variables 所以我试图通过在我自己的 CSS :root 样式中设置它们来覆盖这些变量，如下所示：

:root {
  --bs-primary: tomato;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<button class="btn btn-primary">
  Why is my color not tomato?
</button>

如何在我自己的样式表中设置 Bootstrap 的 CSS 变量，其中我使用许多都具有 bootstrap 作为依赖项的 Web 组件？

Answer 1

我不确定它是否有帮助...但是您可以编辑 bootstrap 文件夹中的 sass 文件，该文件位于您的 node_module 文件夹中。

他们有很多变量，您可以将您的样式添加到标准中。

例如你的颜色。

Answer 2

这基本上是

的重复

:root CSS 变量是 read-only 并且不能在“运行时”更改。做你想做的唯一方法是 re-define CSS 变量使用 SASS

Answer 3

您使用的 Bootstrap 版本显然不支持通过自定义变量进行自定义。至少用于自定义按钮颜色。尝试使用目前为测试版的 v.5.2： https://getbootstrap.com/docs/5.2/getting-started/introduction/

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/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>

如何使用 :root 设置 Bootstrap 5 的 CSS 变量？

How can I set Bootstrap 5's CSS variables using :root?

html

css

twitter-bootstrap

css-variables

bootstrap-5