更改 react-bootstrap 单选按钮颜色的正确方法是啥？

Posted 2023-03-27

【中文标题】更改 react-bootstrap 单选按钮颜色的正确方法是啥？

【英文标题】：What's the proper way to change a react-boostrap radio button color?更改 react-bootstrap 单选按钮颜色的正确方法是什么？

【发布时间】：2021-01-29 08:35:38

【问题描述】：

更改 react-boostrap 单选按钮颜色的正确方法是什么？默认颜色是蓝色，但我只是想以正确的方式更改为任何随机颜色。

我正在使用 ReactJS，我正在渲染我的单选按钮，如下所示：

const Radio = (
    id, type, name, checked, onChange, variant,
) => (
    <ToggleButton id=id type=type name=name checked=checked onChange=onChange variant=variant />
);

这是在返回这个组件的地方添加一个类名并对css进行更新的问题吗？如果有请指教。

提前致谢。

【参考方案1】：

这是在该组件所在的位置添加一个类名的问题吗 返回并更新css

这是一种方法。但是，如果您希望专门针对该变体（或覆盖现有变体，例如 primary），则可以执行以下操作：

.btn-custom-variant 
  background: orange;


<ToggleButton variant="custom-variant"/>

参考：https://react-bootstrap.netlify.app/getting-started/theming/#custom-styles-variants

通常没有“正确”的方式来做到这一点。这完全取决于您的前端架构。