Установить цвет при нажатии кнопки, например, выбрать отменить изменение цвета

Question

Я пытаюсь использовать Avatar of ant d в качестве кнопки multipikcer, но я хочу изменить цвет при выборе любого из них.

  const weekDays = ["S", "M", "T", "W", "TH", "F", "ST"];

return 
(<>{weekly && (
        <div>{weekDays.map((days, index) => selectedWeekdays(days))}</div>
      )}</>)



const selectWeekDays = (day) => {
    let wD = weekday;
    let index = wD.findIndex((d) => d === day);
    if (index > -1) {
      wD.splice(index, 1);
    } else {
      wD.push(day);
    }
    setWeekday(wD);
  };

  const selectedWeekdays = (days) => {
    let index = weekday.findIndex((d) => days.value === d);
    let changeColor = (Style["background-color"] = "#FFFFFF");

    if (index > -1) {
      changeColor = Style["background-color"] = "#ffffff";
    }

    return (
      <Avatar
        id={days}
        onClick={() => selectWeekDays(days)}
        className={changeColor && Style["week-days"]}
        key={days}
      >
        {days}
      </Avatar>
    );
  };

и это файл S CSS для этого

.week-days {
  border: "1px solid #000000";
  display: "flex";
  align-items: "center";
  color: "#000000";
  height: 55;
  cursor: "pointer";
  border: 1px solid #ddd;
  width: 100;
  margin: 2px;
  text-align: center;
  color: black;
}

Дело не в том, что я не могу изменить цвет при выборе. Другой лог c работает, как ожидается, но не меняет цвет.

Итак, изначально он имеет белый фон и черный текст, и когда я выбираю его, он выбирается, и цвет меняется на синий фон и белый текст.

Но вместо кода выше я получаю этот результат

нет, белый цвет устанавливается, и цвет не меняется при выборе кнопки.

Также ниже то, что я ожидать ..

Может кто-нибудь мне с этим поможет ?? что я делаю не так?

Answer 1

Используйте JavaScript для переключения классов стилей

Эти простые JavaScript две строки в паре с классом CSS изменят цвета по желанию.

const dayElement = document.getElementById(day);
dayElement.classList.toggle("selected-day");

.selected-day {
  background: magenta;
  color: white;
}

Демо: https://codesandbox.io/s/optimistic-easley-ugl1i?file= / src / App. js

Если у вас есть какие-либо вопросы или предложения, не стесняйтесь спрашивать.