Bootstrap 4 SASS Table-Primary 类没有拾取更改的主颜色？

Question

我仍在学习 BS4 和 SASS，但我不明白为什么设置我的原色没有被选中。

我创建了一个客户变量文件并设置了我想要的$blue 的颜色。这就是我在_custom-variables.scss 文件中的全部内容。

$blue: #0078D2;
$light: #F7F7F7;

然后在我的 site.scss 文件中导入它。

@import "scss/_custom-variables.scss";
@import "bootstrap/bootstrap.scss";
@import "scss/_my-theme.scss";

当我查看已编译的 CSS 文件时，我可以看到 $blue 设置为正确的值。

:root {
  --blue: #0078D2;
  --indigo: #6610f2;
  --purple: #6f42c1;

但是，当我将以下内容用于表格标题时，它会显示默认的 BS4 蓝色，它比我要设置的蓝色要浅得多。这是编译后的 CSS 的 sn-p，您可以看到蓝色设置正确。

<table class="table table-striped table-bordered">
<thead>
    <tr class="table-primary">
        <th>File Name</th>
        <th>File Date</th>
        <th>Action</th>
    </tr>
</thead>

奇怪的是，我有一些基本文本，我正在使用 text-primary 类，它正在使用我设置的 $blue 颜色。所以，table-primary 一定有什么东西，但我没有看到。我查看了我的 Bootstrap 文件夹中的_tables.scss，但我没有看到任何看起来像是在设置它的东西。当我在整个解决方案中搜索table-primary 时，我发现的只是编译后的 CSS 中的类，而不是任何 .scss 文件中的类。编译后的 CSS 中的 table-primary 具有较浅的蓝色。

这是拾取正确的蓝色。

<span class="text-primary">@ViewBag.FolderPath</span>

Answer 1

是的，alert-primary 和 list-group-item-primary 的背景也会发生这种情况，因为在 Bootstrap 4 sass 的第 80 行的 bootstrap/scss/_functions.scss 中发现了很棒的函数 theme-color-level，它动态创建更亮或更暗颜色基于您的颜色。 在您的情况下，类 table-primary 已在 bootstrap/scss/_tables.scss 第 95 行：

@each $color, $value in $theme-colors {
    @include table-row-variant($color, theme-color-level($color, -9));
}

在第 3 行的 bootstrap\scss\mixins_table-row.scss 中找到 table-row-variant mixin，它将采用较暗或较亮的新颜色并将其设置为 .table-primary、.table-primary > th 或 .table-primary 的背景颜色> td 元素。

此功能的主要优点是为您的警报、表格和列表组项生成动态背景颜色。尝试将$blue 或$primary 更新为#598234 或像这样在您的自定义scss/_custom-variables.scss 文件中添加新的主题颜色

$theme-colors: ("javatmp": #598234);

您将从文章Preparing Template for Bootstrap customization 中得到类似的内容：

以下文章提供了关于theme-color-level 函数的少量信息： Anatomy Of Bootstrap And JavaTMP SASS Theme Styling

Answer 2

表格着色类默认使颜色变浅。

如果您不希望发生这种情况，请将 table-primary 替换为 bg-primary。

---

来源：

• Docs
• Source code