How to Change Background Color of Active Radio Button in React-Bootstrap

How to change background color of active radio button in react-bootstrap?

You can toggle the class for each radio button using your existing onChange event.

const handleChange = (e) => {
    const newData = e.target.value;
    var elems = document.querySelectorAll(".toggleButtonNew.active");
    [].forEach.call(elems, function (el) {
      el.classList.remove("active");
    });
    e.target.closest("label").classList.toggle("active");
    setRadioValue(newData);
};

And add your desired styles to that class

.active {
    background-color: red !important;
}

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

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.

How do I change the background color of a selected react-bootstrap ToggleButton?

You can do this is CSS by adding the following class and style rule.

!important is needed to override the react-bootstrap library's style.

.Btn-Blue-BG.active {
  background-color: blue !important;
}

and

<ToggleButton className="Btn-Blue-BG" ...>

See demonstration below:

https://codesandbox.io/s/6nwkwnn29z

How do I change the color of radio buttons?

A radio button is a native element specific to each OS/browser. There is no way to change its color/style, unless you want to implement custom images or use a custom Javascript library which includes images (e.g. this - cached link)

How to change background color of button using react

What you need to do is to store an active state for the button, default the state to the name of the first button.

Once you do that you can set an active className for the button which is selected.

onClick event of the button update the activeButton state.

const button_Data = [
  {
    name: "Name",
    value: "name"
  },
  {
    name: "Class",
    value: "class"
  },
  {
    name: "Age",
    value: "age"
  },
  {
    name: "Subjects",
    value: "subjects"
  },
  {
    name: "School",
    value: "school"
  }
];
function Stddata(props) {
  const [activeButton, setActiveButton] = useState(button_Data[0].name);
  const handleClick = e => {
    const name = e.target.name;
    setActiveButton(name);
  };
  return (
    <div>
      {button_Data.map(item => {
        const className = activeButton === item.name ? "active" : "";
        return (
          <div key={item.value}>
            <button
              className={`btn btn-outline-secondary mb-1 form-control text-left ${className}`}
              name={item.name}
              value={item.value}
              onClick={handleClick}
            >
              {item.name}
            </button>
          </div>
        );
      })}
    </div>
  );
}

export default Stddata;

Working demo

---

Related Topics