Ошибка: [ThemeProvider] Пожалуйста, сделайте так, чтобы ваша тема поддерживала простой объект - PullRequest
Новая
       5

Ошибка: [ThemeProvider] Пожалуйста, сделайте так, чтобы ваша тема поддерживала простой объект

0 голосов
/ 15 февраля 2020

Здравствуйте, я пытаюсь использовать тему эмоций, но я столкнулся с этой ошибкой и не могу решить

код: 

const [theme, setTheme] = usePersistedState('theme', light);

  const toggleTheme = () => {
    setTheme(theme.title === 'light' ? dark : light);
  };
  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <button onClick={toggleTheme}>a</button>
      </div>
    </ThemeProvider>
  );

мой крюк: 

function usePersistedState(key, initialState) {
  const [state, setState] = useState(() => {
    const storageValue = localStorage.getItem(key);
    if (storageValue) {
      return JSON.parse(storageValue);
    } else {
      return initialState;
    }
  });
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(state.type));
  }, [key, state]);

  return [state, setState];
}

мои темы:

dark: 

export default {
  type: 'dark',

  colors: {
    primary: '#222',
    secondary: '#DF2935',

    background: '#333',
    text: '#fff',
  },
};

light: 

export default {
  type: 'light',

  colors: {
    primary: '#3772FF',
    secondary: '#DF2935',

    background: '#f5f5f5',
    text: '#333',
  },
};

Я не знаю, как решить эту проблему I в основном, сохранить мою тему в локальном хранилище, чтобы иметь возможность сохранить мои предпочтения

...