У меня есть один флажок, который меняет цветовую тему на темную или светлую. Но я хочу добавить еще три флажка, которые также будут цвета страницы, то есть я хочу иметь 4 флажка, где ...

1
Synchro 23 Янв 2021 в 19:36

2 ответа

Лучший ответ

Сохраните активный цвет в localStorage, например

localStorage.setItem('color', color);

Установите цвет исходя из этого:

 const [color, setColor] = useState(localStorage.getItem("color"));


  const changeBg = (backgroundColor) => {
    localStorage.setItem('color', backgroundColor);
    setColor(backgroundColor)
  };

И используйте его для установки стиля цвета фона:

 <div style={{ backgroundColor: color }}>
      <div>
        <label>
          <input
            onChange={() => changeBg("green")}
            type="radio"
            name="background"
          />{" "}
          Green
        </label>
        <label>
          <input
            onChange={() => changeBg("red")}
            type="radio"
            name="background"
          />{" "}
          Red
        </label>
        <label>
          <input
            onChange={() => changeBg("blue")}
            type="radio"
            name="background"
          />{" "}
          Blue
        </label>
      </div>
    </div>

Другой подход - получить className вместо стиля, но вам нужно определить правило CSS для каждого цвета, например .red: {...}, .black: {...} и т. Д.

1
jzProg 23 Янв 2021 в 19:15

Проверьте код по ссылке ниже

Песочница кода

Все, что я сделал, это добавил

const [bg, setBg] = useState("bg-white"); // this will hold classname for background;

const changeBg = (color) => setBg(color);

И добавьте его в имя класса приложения

<div className={`App ${bg}`}>
<label>
   <input checked={bg === "dark"} onChange={() => changeBg("bg-red")} /> Dark
<label>
</div>

Я думаю, что код простой, если вы ничего не понимаете, спросите меня

0
Naol Chala 23 Янв 2021 в 18:15
65861675