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

Question

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

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

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

:root {
  --primary: somecolor;
}

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

Answer 1

确实没有一种简单的方法可以做到这一点。您可以在 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'));

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