使用内部 CSS 覆盖主要的 Bootstrap 4 颜色答案

【问题标题】：Overwrite primary Bootstrap 4 color with internal CSS使用内部 CSS 覆盖主要的 Bootstrap 4 颜色
【发布时间】：2020-04-02 12:13:46
【问题描述】：

对于具有内部 CSS 样式表的动态 Bootstrap 组件，我需要将默认的主要 Bootstrap 4 颜色（在加载 Bootstrap 样式表之后）更改为自定义颜色（由用户选择）。例如，我可以这样做.btn-primary { background-color: red; }，但这仅适用于按钮，但是，它不会更改其他 btn 主要状态，例如 ":hover"、":active" 和 "disabled"。它也不会改变 .alert-primary, .text-primary, .bg-primary, .btn-outline-primary, .badge-primary 等整个 CSS 中的“主”颜色...

什么是可能的解决方案？

【问题讨论】：

标签： html css twitter-bootstrap dynamic

【解决方案1】：

您需要下载 Bootstrap Sass 文件。您可以通过this link 这样做。

拥有它们后，您可以打开主引导 .scss 文件并搜索：

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

将“主要”更改为您需要的内容，然后重新编译为 CSS。如果您的机器上没有安装 Sass，您可以使用各种在线工具来完成此操作。 Example.

来源：https://getbootstrap.com/docs/4.3/getting-started/theming/

【讨论】：

我无法编辑 .scss 文件，因为在用户更改所需颜色后我需要更改原色。有一个颜色选择器，用户选择颜色，保存设置，Bootstrap 组件需要有标准的行为，但使用自定义的原色而不是标准颜色。有可能吗？
我的错，忘记了你帖子的最后一点。我对那个特定的用例不太熟悉，但你可以尝试这样做：stackoverflow.com/a/30724171/7974621。

【解决方案2】：

您可以通过使用变量概念来做到这一点(https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) Bootstrap 4 也适用于变量

您可以尝试在运行时更改变量值，如下所述：

:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

.five {
  background-color: var(--main-bg-color);
}

// get variable from inline style
element.style.getPropertyValue("--main-bg-color");

// get variable from wherever
getComputedStyle(element).getPropertyValue("--main-bg-color");

// set variable on inline style
element.style.setProperty("--main-bg-color", "red");

【讨论】：

【解决方案3】：

有不同的方法可以做到这一点。我正在描述其中之一。将以下行导入您的 scss 文件。 @import '~bootstrap/scss/bootstrap.scss';

然后写下面的代码来覆盖它。

$primary = 'red';
$gray = 'gray';
.btn {&.btn-primary {
 @include button-variant($primary, $primary, $primary, $primary);
  &.disabled,
  &:disabled {
   border: $gray;
   background-color: $gray;
 }
 &:hover {
  opacity: 0.85;
}
 } 
 }

检查link 以使用 sass mixins 覆盖引导程序类。

【讨论】：