Question

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

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

基本上从以下位置“继承”颜色：

:root {
  --primary: somecolor;
}

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

Answer 1

不确定是否可以，但是有个主意...
您可以像这样编辑bootstrap.css文件吗？
：root {---primary：未设置; }

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

Answer 2

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

SASS生成“主要”颜色Bootstrap 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'));

代码演示：https://www.codeply.com/go/R4X5x8taiH

Answer 3

老实说 ...我不确定尝试在 CSS 中覆盖引导程序构建在诸如 $primary 之类的颜色变量上的类的一些部分是否是个好主意，但让我们其余的类构建在同一个变量上。

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

恕我直言，更好的方法是按照 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 颜色变量是不够的，因为类中的颜色被硬编码为原始的十六进制颜色。您确实必须覆盖原始类，这会导致代码结构翻倍。

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

3 个答案: