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

Question

What's the proper way to change a react-boostrap radio button color? The default color is blue, but I simply want to change to any random color the correct way.

I'm using ReactJS and my I'm rendering my radio button like this:

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

Is this a matter of adding a className where this component is being returned and making an update to the css? If so please advise.

Thanks in advance.

Answer 1

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

This is one way to do it. However, if you are looking to target that variant specifically (or override the existing variants such as primary), you can do something like this:

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

<ToggleButton variant="custom-variant"/>

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

There generally isn't a "correct" way of doing this. It depends entirely on your front-end architecture.