更改react-boostrap单选按钮颜色的正确方法是什么？

编程问答 2022-08-10

问题描述

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

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

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

这是在返回该组件的位置添加className并更新CSS的问题吗？如果是这样，请提出建议。

谢谢。

解决方法

这是在此组件所在的位置添加className的问题 返回并更新CSS

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

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

<ToggleButton variant="custom-variant"/>

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

通常没有这样做的“正确”方法。这完全取决于您的前端体系结构。

radioreact-bootstrapreactjsreactjs