If you've got an example of something that you've done with glamorous that doesn't really work on one of the other pages, then please feel free to open a pull request on this page!
The best solution for CSS layout
CSS Grid Layout is a relatively new layout tool for the web. It's incredibly powerful and expressive and enables new layouts that were previously very difficult or altogether impossible.
In this example, we use the
feature of CSS to opt-into CSS Grid in browsers where this is available. Be warned that
not all browsers will support
How to expose an API to override styles in a component
This demonstrates one way that you could take a reusable component and expose
a mechanism for overriding styles for components within the component using
a prop called
The key bit here is passing
styleOverrides to the
theme prop of the
ThemeProvider. Because you may still need to use the
for other things, it's nice to namespace these (like this example does).
Then you can write a little helper function (
getStyleOverrides) to make
adding this overrides capability to each of your glamorous components.
It even works with the
Simple styled button
Something as simple as a button can have a lot of style packed into it. This example shows how to isolate all the style logic using glamorous so you can easily use your beautiful button anywhere in your app.