所以我拥有的是一个加载了 Bootstrap.css
的 React 元素。我想以某种方式覆盖变量,例如我有一堆按钮,例如
<button className="btn btn-primary">Hello</button>
基本上“继承”了以下颜色:
:root {
--primary: somecolor;
}
有没有办法以某种方式覆盖它?我已经尝试将它作为内联样式传递给组件,例如 <Component style={{"--primary" : "red"}} />
将覆盖 :root { --primary }
,但按钮颜色将保持不变。最简单的方法是什么,考虑到我支持动态颜色,所以我不能创建一些 CSS 文件,如果我不必重写每个按钮就好了,我必须是 styled-component
头脑 Prop !
最佳答案
确实没有一种简单的方法可以做到这一点。您可以在 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
关于css - 在 React 中动态覆盖 Bootstrap CSS 变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51910341/