Каков наилучший способ стилизовать компонент явно?

Question

Как мы можем явно добавить стиль для компонента в реагировать. Явно имел в виду, что если мы посещаем компонент, стиль должен быть применен, и если мы уходим от этого компонента, стиль должен быть удален.

Сценарий 1 Предположим, что у нас есть два компоненты day и night, а по умолчанию background-color приложения - белый. Затем, если я использую \ посещаю компонент night, тогда цвет back-ground должен измениться на черный, а если я уйду от ночного компонента, цвет фона должен измениться на значение по умолчанию

Решение 1

//night component
import React from "react";

import './style.css'  //give background-color: black

и затем импортируйте другую таблицу стилей, которая имеет свойство background-color: white, в другие компоненты. Но это не идеально, так как мы можем добавить таблицу стилей ко всем другим компонентам.

Answer 1

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

import classNames from 'classnames';

const BackgroundColor = () => {
   const [toggle, setToggle] = useState(true)

   // Define css logic
   const bgToggle = classNames({
     'background-color: black': toggle,
     'background-color: white': !toggle'
   });

   // Toggle state
   const setToogle = () => setToggle(!toggle)

   return <div onClick={setToogle} className={bgToggle}>{toggle}</div>

}

Это один из способов сделать это, есть другие способы c

Answer 2

Вы можете прочитать это для обзора нескольких способов стилизации компонентов реакции, но для вашего конкретного c я бы рекомендовал использовать Styled Components. Это библиотека js, которая сочетает в себе старые добрые таблицы стилей со встроенными css и позволяет динамически стилизовать компоненты. Вы можете прочитать документы и попробовать сами, но в вашем случае вы сможете иметь свойство background, значение которого будет зависеть от реквизита (например, day или night). Попробуйте, вы не пожалеете об этом :)