Блог

Главная - Вопросы по программированию - Как исправить тему chakra-ui на фоне загрузки ввода?

Как исправить тему chakra-ui на фоне загрузки ввода?

#javascript #reactjs #next.js

#javascript #reactjs #next.js

Вопрос:

Я пытаюсь добавить тематизацию в приложение nextjs, где я использую chakra-ui, но некоторое время сталкивался с этой проблемой. Прямо сейчас при загрузке /form маршрута тема горит. Как только она становится темной, тема сохраняется в локальном хранилище. const { colorMode, toggleColorMode } = useColorMode(); Используя это, он устанавливает переключатель в значение true, что дает темную тему.

После обновления тема становится темной, поскольку она сохраняется в локальном хранилище.

 const { colorMode, toggleColorMode } = useColorMode();
const isDark = colorMode === 'dark';
 return (
   Switch
     position="fixed"
     top="1rem"
     right="1rem"
     color="green"
     isChecked={isDark}
     onChange={toggleColorMode}
   />
 );

Даже isDark если это правда, переключатель все равно не установлен.

Кроме того, фон поля ввода остается светлым, даже если остальные элементы находятся в темном режиме.

Что я делаю не так?

https://codesandbox.io/s/lingering-darkness-lypfr

Ответ №1:

Я использовал «@chakra-ui / core»: «^ 1.0.0-rc.2». На данный момент последней версией является 1.0.0-rc.3.

Мне пришлось использовать ColorModeScript так же, как https://github.com/ljosberinn/personal-react-boilerplate/blob/master/pages/_document.tsx#L70

Он начал работать. Надеюсь, это спасет чей-то день.