Bootstrap 5通过Utility API扩展表格背景色的配置问题

你的当前配置距离生效只差几个关键调整，核心问题是样式权重不足和缺少表格元素的作用限定，具体修正如下：

1. 先补全自定义主题色定义（如果未提前配置） #

Bootstrap不会自动生成--bs-corn、--bs-rust这类自定义变量，需要先在自定义SCSS开头扩展$theme-colors：

// 先定义自定义主题色，Bootstrap会自动生成对应的CSS变量
$theme-colors: map-merge($theme-colors, (
  "corn": #f0e68c, // 替换成你实际需要的颜色值
  "rust": #b7410e
));

2. 修正Utility API配置 #

原配置没有限定样式仅作用于表格元素，导致生成的.table-rust类权重不足以覆盖Bootstrap默认表格样式，调整方式有两种：

方式一：限定样式作用于.table元素（保留.table-{color}命名） #

$utilities: map-merge($utilities, (
  "table-background-color": (
    property: background-color,
    class: table,
    selector: ".table", // 强制样式仅作用于带.table类的元素，提升权重
    values: map-merge($theme-colors, (
      "blue": var(--bs-blue),
      "green": var(--bs-green),
      "corn": var(--bs-corn),
      "rust": var(--bs-rust),
    )),
  )
));

使用方式不变：<table class="table table-bordered table-rust">

方式二：改用独立前缀（避免与默认类名混淆） #

如果担心命名冲突，可以改用table-bg作为前缀，生成.table-bg-rust类：

$utilities: map-merge($utilities, (
  "table-background": (
    property: background-color,
    class: table-bg,
    values: map-merge($theme-colors, (
      "blue": var(--bs-blue),
      "green": var(--bs-green),
      "corn": var(--bs-corn),
      "rust": var(--bs-rust),
    )),
  )
));

使用方式：<table class="table table-bordered table-bg-rust">

3. 编译顺序注意事项 #

确保你的自定义SCSS代码在引入Bootstrap核心SCSS之前定义变量，之后执行Utility API扩展，示例结构：

// 1. 自定义主题色
$theme-colors: map-merge($theme-colors, (
  "corn": #f0e68c,
  "rust": #b7410e
));

// 2. 扩展Utility API
$utilities: map-merge($utilities, (
  // 这里放你的配置
));

// 3. 引入Bootstrap核心
@import "../node_modules/bootstrap/scss/bootstrap";

内容的提问来源于stack exchange，提问作者klewis