更改 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进行更新的问题吗？如果有请指教。

提前致谢。

【问题讨论】：

标签： css reactjs react-bootstrap radio

【解决方案1】：

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

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

.btn-custom-variant {
  background: orange;
}

<ToggleButton variant="custom-variant"/>

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

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

【讨论】：