ricokahler / hacker-ui

A design system for the modern developer. (development on hiatus)
https://hacker-ui.com/
MIT License
241 stars 10 forks source link

Could not find theme. Ensure this component is wrapped in a ThemeProvider #62

Closed avevlad closed 4 years ago

avevlad commented 4 years ago
npm install --save hacker-ui@next react-style-system

Code:

import * as React from 'react';
import { Button, createTheme } from "hacker-ui";
import { ThemeProvider } from 'react-style-system';

const theme = createTheme({});

export default () => {
    return (
        <div>
            <ThemeProvider theme={theme}>
                <Button>Button</Button>
            </ThemeProvider>,
        </div>
    );
};

image

tompeace commented 4 years ago
import { ThemeProvider, createTheme } from 'hacker-ui'
const theme = createTheme()

const App = () => (
    <ThemeProvider theme={theme}>
           ...
    </ThemeProvider>
)

This worked for me, in version 0.1.0

edit: clarified version used

pearlzhuzeng commented 4 years ago

Hey @avevlad, try using the ThemeProvider from 'hacker-ui' instead of 'react-style-system':

import { ThemeProvider } from 'hacker-ui'
ricokahler commented 4 years ago

@avevlad My apologizes for the incorrect docs. Follow the advice from @tompeace and @pearlzhuzeng and import the theme provider from hacker-ui instead of react-style-system and it should work.

I flipped the switch on the docs new docs a bit pre-maturely because the docs of next version of hacker-ui (i.e. v0.2.0) has much better performance and is mobile friendly.

However, v0.2.0 is still unreleased and I haven't audit the docs 😅. I'll update them today along with some patches.

Thanks a bunch for pointing this out!

ricokahler commented 4 years ago

@avevlad I updated the documentation and it's now live at hacker-ui.com. Please feel free to open any similar issues!