Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
gremo opened this issue Apr 21, 2021 · 0 comments
Open

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

gremo opened this issue Apr 21, 2021 · 0 comments
Labels
question Further information is requested

Comments

@gremo
Copy link

gremo commented Apr 21, 2021

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 gremo added the question Further information is requested label Apr 21, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@gremo