更改反应引导单选按钮颜色的正确方法是什么？

Question

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

提前致谢。

Answer 1

Is this a matter of adding a className where this component is being returned and making an update to the css

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

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

<ToggleButton variant="custom-variant"/>

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

通常没有执行此操作的“正确”方法。这完全取决于您的 front-end 架构。

更改反应引导单选按钮颜色的正确方法是什么？

What's the proper way to change a react-boostrap radio button color?

css

radio

reactjs

react-bootstrap