不能对文本或BG使用主题颜色 [英] Can not use theme color with text or bg

问题描述

我在SCSS文件中覆盖引导程序的theme-colors，如下所示

// set variables
$primary: #8dc3a7;
$light: #b4d6c1;
$starorange: #df711b;

// import functions and variables
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

$custom-theme-colors: (
  "starorange": $starorange,
);

// modify theme colors
$theme-colors: map-merge($theme-colors, $custom-theme-colors);

// bootstrap import
@import "../node_modules/bootstrap/scss/bootstrap";

我可以使用按钮中的starorange颜色，如下所示，它正在正确应用颜色

<button class="btn btn-md btn-starorange">Send</button>

但是，我不能不能在相同的HTML文档中对文本或BG使用相同的颜色，如下所示。

<div class="pb-1 text-starorange">
    <i class="bi bi-star-fill"></i>
    <i class="bi bi-star-fill"></i>
    <i class="bi bi-star-fill"></i>
    <i class="bi bi-star-fill"></i>
    <i class="bi bi-star-fill"></i>
</div>

或

<section class="bg-starorange">
     .... some html here ...
</section>

所以，上面两个示例在输出中都没有影响，我的意思是根本不应用颜色。我不明白为什么会这样，任何帮助都将不胜感激。

ps：传输的CSS文件中没有bg-starorange、text-starorange，但存在btn-starorange、border-starorange或link-starorange。

推荐答案

我最近回答了similar question，但似乎确实有new issue introduced in 5.1.0，因为引导博客上提到了此更改.

已更新.BG-和.text-实用程序(&Q) 构建新的RGB值是为了帮助我们在整个项目中更好地使用CSS变量。首先，我们的背景色和颜色实用程序已经更新，可以使用这些新的RGB值进行实时定制，而无需重新编译任何背景或文本颜色的SASS和飞翔透明度。"；

当前在5.1.0中，您需要像这样重新构建所有bg-*和text-*类.

@import "functions";
@import "variables";
@import "mixins";

$starorange: #df711b;

$custom-theme-colors: (
  "starorange": $starorange
);

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

@import "bootstrap";

Demo

---

Bootstrap 5.1.x更新--自定义bg-和text-颜色的问题将在5.2.x中得到修复：https://github.com/twbs/bootstrap/issues/35297

这篇关于不能对文本或BG使用主题颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！