Почему тема меняется только после второго клика на переключатель?

Question

vertically-challenged @vertically-challenged

Для смены темы я использую такой код:

Функция, обрабатывающая клик на переключатель, которую я передаю в кнопку из компонента App:

const onThemeToggleHandler = (theme, setTheme) => {
  setTheme(theme == 'theme-dark' ? 'theme-light' : 'theme-dark')
}

Состояние темы и useEffect, в котором и происходит смена классов так же в компоненте App:

const [theme, setTheme] = useState('theme-dark')

  useEffect(() => {
    document.querySelector('.App').classList.toggle(theme)
  }, [theme])

Комментировать

Подписаться 1 Простой Комментировать

Answer 1 · 2022-03-02 18:56:31

Как переключается тема? Старый класс удаляется, новый добавляется. Давайте посмотрим, что делаете вы:

useEffect(() => {
  document.querySelector('.App').classList.toggle(theme)
}, [theme])

Переключаете новый класс. Не добавляете, а переключаете. А старый - вообще не трогаете. Исправляем:

useEffect(() => {
  const el = document.querySelector('.App');
  el.classList.add(theme);
  return () => el.classList.remove(theme);
}, [ theme ]);