Community Examples
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!
CSS Grid
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 @supports
feature of CSS to opt-into CSS Grid in browsers where this is available. Be warned that
not all browsers will support @supports.
CodeSandbox
Accept style overrides
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 styleOverrides.
The key bit here is passing styleOverrides to the theme prop of the
glamorous ThemeProvider. Because you may still need to use the theme
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 css prop!
CodeSandbox
Contributors:
