CODEWITHSUNDEEP
cssreactjsradio-buttonreact-bootstrap
N8BIZ
N8BIZ

Reputation: 151

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

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.

Upvotes: 0

Views: 652

Answers (1)

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

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.

Upvotes: 1

Related Questions