React Rainbow UI example missing theme

Question

I'm trying to test the sidebar example from rainbow ui (https://react-rainbow.io/#/Sidebar)

    const SideBarContainer = styled.div.attrs(props => {
        return props.theme.rainbow.palette;
    })

But I'm getting the error that props.theme.rainbow.palette is unresolved. How can I fix this?

see this [sandbox](https://codesandbox.io/s/sparkling-wave-rqzr7?file=/src/App.js) I think you need to wrap your "parent" component in a `Application` tag to be able to get theme and rainbow context . Like it's explain in the [doc](https://react-rainbow.io/#/Application) — antoineso, Mar 31 '21 at 17:11
I ran into the same error, and I had an "" element wrapped around the themed objects. The problem was that I had "styled-components" as a dependency in package.json. After removing this dependency it worked. — hlasso, Nov 04 '21 at 14:02

score 3 · Accepted Answer · answered Mar 31 '21 at 17:54

As I explain on my comment you need to wrap your react app in a Applicationcomponent like explain in the Like it's explain in the doc from React Rainbow :

export default function App() {
  return (
    <div className="App">
      <Application>
        <Header />
      </Application>
    </div>
  );
}

I made a code SandBox of the React Rainbow sideBar demo that I pass in functional components:

React Rainbow UI example missing theme

1 Answers1