如何更改react-bootstrap中活动单选按钮的背景颜色? [英] How to change background color of active radio button in react-bootstrap?

问题描述

在React项目中，我有单选按钮，用于列出日历日期和日期.我的意图是更改那些单选按钮的背景色并保持不变.在屏幕上单击时，它不应消失.

In a React project I've radio buttons enlisting calendar dates and days. My intention is to change the background color of those radio buttons and also persist it. It should not fade away when clicked on screen.

以下是供参考的代码:

{newDate.map((data, i) => (
          <ButtonGroup toggle style={{ width: "100%" }}>
            <GridListTile style={gridListStylePhoto}>
              <h5>{currday(data.getDay())}</h5>
              <ToggleButton
                key={i}
                type="radio"
                active="true"
                variant="light"
                name="radio"
                value={currday(data.getDay()) + " " + data.getDate()}
                checked={radioValue === data.getDate()}
                onChange={(e) => {
                  handleChange(e);
                }}
              >
                <br />
                {data.getDate()}
              </ToggleButton>
            </GridListTile>
          </ButtonGroup>
        ))}

以下是样式参考:

input[type="checkbox"],
input[type="radio"] {
  display: none;
}
.btn-light {
  background-color: transparent;
  border: transparent;
}

.btn-light:checked {
  background-color: red // Here is color doesn't change
}

要更改上述单选按钮的背景颜色怎么办?

What could be done in order to change the background color of above radio buttons?

请参考下面的Codesandbox链接.

Please refer to the below Codesandbox link.

Codesandbox链接: https://codesandbox.io/s/material-demo-分叉的hcbxl

Codesandbox Link: https://codesandbox.io/s/material-demo-forked-hcbxl

推荐答案

您可以使用现有的onChange事件为每个单选按钮切换类.

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;
}

这篇关于如何更改react-bootstrap中活动单选按钮的背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！