Skip to content

Instantly share code, notes, and snippets.

@fjaguero
Last active June 6, 2017 15:10
Show Gist options
  • Save fjaguero/6aefecb90a172d3b14c28bc9d75121d8 to your computer and use it in GitHub Desktop.
Save fjaguero/6aefecb90a172d3b14c28bc9d75121d8 to your computer and use it in GitHub Desktop.
Styled Components: <ThemeProvider /> usage
// Style guide definition
const styleGuide = {
cloudy: '#F2F4F7',
darkGray: '#4A637C',
gray: '#7A8D9F',
// ...more colors or mixins
};
return (
// The theme styles are available everywhere (thanks to React's context API)
// Now you can access to "props.theme.gray" on any component
<ThemeProvider theme={styleGuide}>
<App>
<Switch>
<AuthRoute auth={auth} exact path="/" component={DashboardView} />
<AuthRoute auth={auth} path="/profile" component={DashboardView} />
<Route path="/login" component={LoginView} />
<Route path="/logout" component={LogoutView} />
{/* ...more routes */}
<Route component={NotFoundView} />
</Switch>
</App>
</ThemeProvider>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment