在 React 中动态覆盖 Bootstrap CSS 变量？

Question

所以我有一个加载了Bootstrap.css 的 React 项目。我想以某种方式覆盖变量，所以例如我有一堆按钮，比如

<button className="btn btn-primary">Hello</button>

这基本上“继承”了以下颜色：

:root {
  --primary: somecolor;
}

有没有办法以某种方式覆盖它？我尝试将其作为内联样式传递给组件，例如 <Component style={{"--primary" : "red"}} />，它将覆盖 :root { --primary }，但按钮颜色将保持不变。考虑到我支持动态颜色，最简单的方法是什么，所以我不能创建一些 CSS 文件，如果我不必重写每个按钮，我必须是 @987654326 @那介意道具！

Answer 1

诚实 ...我不确定尝试在 CSS 中覆盖部分类 bootstrap 建立在像 $primary 这样的颜色变量上是否是个好主意，但让我们剩下的的类建立在与它相同的 var 上。

这就是麻烦的方式......

恕我直言，更好的方法是按照 Bootstrap 提供的方式进行操作：

在 SASS 中将基本 var $primary 更改为 Bootstrap 中新的想要的颜色，颜色会改变并且类就在那里。或者添加新颜色 $additional-color 并将颜色添加到映射 $theme-color 并且所有其他类都是即时构建的……看看文档……它比看起来容易得多第一眼：

https://getbootstrap.com/docs/5.0/customize/color/

所以是的：在 SASS 主题中，只需设置/添加颜色变量即可。

但是，如果在项目中无法使用 SASS 或者由于某些原因不需要直接设置……网络上有许多免费的易于使用的主题工具可以为您完成这项工作。比您能够使用您想要的颜色导入干净且一致的 Bootstrap CSS。因为它很简单，Bootstrap 也很成功（不意味着我/你需要喜欢它）。由于 Bootstrap 5 仍然是 Beta 版，这里是 BS4 的一个示例 ...

http://pikock.github.io/bootstrap-magic/app/index.html#!/editor

---

注意：仅更改/覆盖 CSS 文件中的 CSS 颜色变量是不够的，因为类中的颜色被硬编码为原始的十六进制颜色。您确实必须覆盖导致代码结构加倍的原始类。

Answer 2

这并不是一个简单的方法。您可以在 SASS 中为“自定义”原色生成 CSS，然后像这样向组件添加“根”原色类...

SASS 生成“原色”引导 CSS

/* import the necessary Bootstrap files */
@import "bootstrap";

@mixin build-primary-classes($color) {
    /* background classes */
    @include bg-variant(".bg-primary", $color);
    
    /* btn classes */
    .btn-primary {
        @include button-variant($color, $color);
    }
  
    .btn-outline-primary {
        @include button-outline-variant($color);
    }
    
    /* text- classes */
    @include text-emphasis-variant(".text-primary", $color);
    
    /* badge classes */
    .badge-primary {
        @include badge-variant($color);
    }
    
    /* borders */
    .border-primary {
        border-color: $color !important;
    }
}

$customprimarycolors: (
  "purple": purple,
  "red": red,
  "orange": orange
);

@each $colorName, $color in $customprimarycolors {
  .#{$colorName} {
    @include build-primary-classes($color);
  }
}

JS

class Hello extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return( 
        <div className={this.props.className}>Hello <button className="btn btn-primary">Button</button></div>
    );
  }
}

ReactDOM.render(<Hello className="red" />, document.getElementById('root'));

Codeply 演示：https://codeply.com/go/R4X5x8taiH

Answer 3

不确定这是否可行，但一个想法......
你能像这样编辑你的 bootstrap.css 文件吗
:root { --primary: 未设置； }

这样您就不必覆盖任何引导样式？