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.

This allows you to create a glamorous component that accepts flags to enable/disable styles:

Please visit the prop-styles repo for installation and usage details.

Here is an exaple of creating a Breadcrumb style list of naviation links. It is using css selectors based on the this selector & to style it's sub elements based on the position in the list. It also adds pseudo elements to seperate the links.

Note I had to do some funky specificity hacks to get the color of the link applied.

This shows styling of a react-router NavLink. The NavLink component sets a class on the component when it's in it's active state. You can configure the class that gets set and by default it's .active. As glamorous generates dynamic classNames I haven't found a way to pass a name to it. So instead the appoach shown here is to create a selector to target the className that the NavLink component adds.

With glamorous you can still use traditional css selectors! Just put the selector inside a ['.my-sector'] and put the styles you want applied inside an object. Just the same as you would for things like ':hover'.

You can use a simple glamor plugin function to increase the specificity of glamor-generated CSS selectors. This is useful if you need your glamorous styles to take precedence over other global styles on the page (especially link styles).

This demonstrates how to use a component as a selector. Right now glamorous doesn't have great support for nested components. This is actually intentional because it's not a pattern you should generally follow (one of the nice parts of css-in-js is that it allows you to not worry about the cascade of CSS).

To work around this isn't too challenging however. In this example, we add a className to FooterHeader and then reference this in the CSS of the Footer component.

This shows how to combine glamorous with the TransitionGroup and CSSTransition components from react-transition-group. When done properly, simply by mounting and unmounting your components you will get entrance and exit animations (CSS animations alone only provide a way to animate mounting components, not unmounting components).

Mounting a component in the embedded example works as such:

1. The component is mounted.
2. The fade-enter class is applied and the opacity is set to 0.
3. The fade-enter-active class is applied and the opacity transitions to 1.
4. Once the transition is done, both the fade-enter and fade-enter-active classes are removed.

Unmounting a component works similarly:

1. The fade-exit class is applied to the mounted component. The opacity remains at 1. Technically, you don't need a selector for this class since it doesn't do anything for us, but it's a good idea to be explicit when dealing with react-transition-group.
2. The fade-exit-active class is applied to the mounted component and the opacity transitions to 0.
3. Once the transition is done, the component is unmounted.