Community Examples

Examples from people just like you!

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

Hierfür existiert keine Übersetzung. Kannst du beim Übersetzen helfen?

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

Hierfür existiert keine Übersetzung. Kannst du beim Übersetzen helfen?

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

Button

Hierfür existiert keine Übersetzung. Kannst du beim Übersetzen helfen?

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.

CodeSandbox

prop styles

Hierfür existiert keine Übersetzung. Kannst du beim Übersetzen helfen?

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.

CodeSandbox

Hierfür existiert keine Übersetzung. Kannst du beim Übersetzen helfen?

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 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.

CodeSandbox

Hierfür existiert keine Übersetzung. Kannst du beim Übersetzen helfen?

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 .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'.

CodeSandbox

Increase specificity

Hierfür existiert keine Übersetzung. Kannst du beim Übersetzen helfen?

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).

CodeSandbox

Component as a selector

Hierfür existiert keine Übersetzung. Kannst du beim Übersetzen helfen?

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 className to FooterHeader and then reference this in the CSS of the Footer component.

CodeSandbox

Mitwirkende:

kentcdodds's GitHub avatardanseethaler's GitHub avatarpeterschussheim's GitHub avatarkristian-puccio's GitHub avatarcolebemis's GitHub avatar