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.
Simple utility making it easier to create glamorous components that accept prop flags for styles
This allows you to create a glamorous component that accepts flags to enable/disable styles:
<Text faded superheading>faded superheading</Text> <Text heading>heading</Text>
Please visit the prop-styles repo for installation and usage details.
Component that adds 'complex' pseudo elements
Here is an exaple of creating a
Breadcrumb style list of naviation links.
It is using css selectors based on the
& 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.
An example of integrating with a component that have built in classNames already.
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
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'.
Increase specificity of glamor-generated CSS selectors with a simple plugin
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).
How to use a component as a nested selector
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
FooterHeader and then reference this in
the CSS of the
An example of using glamorous together with react-transition-group
This shows how to combine
glamorous with the
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:
fade-enterclass is applied and the
opacityis set to
fade-enter-activeclass is applied and the
fade-enter-activeclasses are removed.
Unmounting a component works similarly:
fade-exitclass 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
fade-exit-activeclass is applied to the mounted component and the