react-theme-provider icon indicating copy to clipboard operation
react-theme-provider copied to clipboard

Published 20 hours ago • verified publisher icon callstack

Documentation unclear, example outdated, can't make it work

Open gremo opened this issue 3 years ago • 0 comments

To me, documentation is completely unclear and the example isn't updated. Following the example, you end up with a not working app (Nextjs _app.js):

/* eslint-disable react/prop-types */
import '../styles/globals.css'
import Head from 'next/head';
import { ThemeProvider } from '@callstack/react-theme-provider';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <ThemeProvider theme={{ foo: 'bar' }}>
        <Component {...pageProps} />
      </ThemeProvider>
    </>
  );
}

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

So, I followed the README, exporting from theming.js:

import { createTheming } from '@callstack/react-theme-provider';

export const themes = {
  normal: {
    primaryColor: '#FFA72A',
    accentColor: '#458622',
    backgroundColor: '#FFC777',
    textColor: '#504f4d',
    secondaryColor: '#7F5315',
  },
  crazy: {
    primaryColor: '#1B8C81',
    accentColor: '#458622',
    backgroundColor: '#8FC266',
    textColor: '#D94B2B',
    secondaryColor: '#B9667F',
  }
};

const { ThemeProvider, useTheme } = createTheming(themes.normal);

export { ThemeProvider, useTheme };

Thanks god I can use useTheme it in my index.js! But... what's the theme property of the ThemeProvider? How can I add multiple themes, and maybe switch themes?

gremo avatar Apr 21 '21 17:04 gremo