css 如何在Bootstrap 5中管理颜色继承？

vbopmzt1 于 2023-03-20 发布在 Bootstrap

关注(0)|答案(1)|浏览(210)

我正在尝试覆盖Bootstrap 5 .text-successcolor，以提高自定义.bg-lvlN类的对比度，声明如下：

.bg-lvl1 {
  background-color: #303333;
}

.bg-lvl2 {
  background-color: #222424;
}

/* My attempt to override .text-success color */
.bg-lvl1 .text-success {
  color: #00d750 !important;
}

.bg-lvl2 .text-success {
  color: #00c74a !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-lvl2">
  <!-- This span has #00c74a color as expected -->
  <span class="text-success">Green</span>
  <div class="bg-lvl1">
    <!-- This span has #00c74a color but I would like it to be #00d750 -->
    <span class="text-success" id="nested">Green</span>
  </div>
</div>

不幸的是，.bg-lvl2 .text-success在#nestedspan上战胜了.bg-lvl1 .text-success规则。
有没有办法让.bg-lvl1 .text-success应用到#nestedspan上？或者用另一种方法来获得想要的颜色？

css

来源：https://stackoverflow.com/questions/75742299/how-to-manage-color-inheritance-in-bootstrap-5

1条答案

按热度按时间

yks3o0rb1#

我通过在我的自定义后台类上重新定义Bootstrap 5 --bs-[color]-rgb CSS变量修复了这个优先级问题：

@import 'bootstrap/scss/functions';

.bg-lvl1 {
  --bs-success-rgb: to-rgb(#00d750);
}

.bg-lvl2 {
  --bs-success-rgb: to-rgb(#00c74a);
}

以便使用且不覆盖以下Bootstrap 5 .text-success规则：

.text-success {
  --bs-text-opacity:  1;
  color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
}

一个二个一个一个

赞(0）回复(0）举报 2023-03-20

我来回答

css 如何在Bootstrap 5中管理颜色继承？

1条答案

相关问题

热门标签

最新问答