Community Examples

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.

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!

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.