Прикрепить изменение состояния к цвету фона тела приложения React?

Question

У меня есть комната с подсветкой, которая имеет 4 уровня - выкл., Низкий, средний, высокий ...

Уровень меняется при каждом нажатии кнопки.

Как я могу изменить цвет тела на странице в зависимости от изменений в состоянии?

const reducer = (state, action) => {
  switch (action.type) {
    case 'advance':
      return (state + 1) % 4;
    case 'off':
      return 0;
    default:
      return state;
  }
};

function Room() {
  const [lightLevel, dispatch] = useReducer(
    reducer,
    0
  );

  return (
    <>
      Lights are: {describeLightLevel(lightLevel)}
      <br />
      <button
        onClick={() => dispatch({ type: 'advance' })}
      >
        Next
      </button>
      <button
        onClick={() => dispatch({ type: 'off' })}
      >
        Turn Off
      </button>
    </>
  );
}

function describeLightLevel(level) {
  switch (level) {
    case 0:
      return 'off';
    case 1:
      return 'low';
    case 2:
      return 'medium';
    case 3:
      return 'high';
    default:
      return 'broken';
  }
}

Answer 1

Вот простой пример, лучше всего стилизовать Container вместо body класса:

import styled, { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    color: ${({ color }) => color || 'black'};
  }
`;

const App = () => {
  const [color, setColor] = useState('red');
  const setGreen = () => setColor('green');
  const setBlue = () => setColor('blue');
  return (
    <>
      <GlobalStyle color={color} />
      <Container>
        <Room />
      </Container>
      <button onClick={setGreen}>set Green</button>
      <button onClick={setBlue}>set Red</button>
    </>
  );
};