Ejemplos de la comunidad

CSS Grid Layout es una herramienta de diseño relativamente nueva para la web. Es increíblemente potente y expresiva, permite nuevos diseños que antes eran muy difíciles o totalmente imposibles.

En este ejemplo, usamos la función @supports de CSS para optar por CSS Grid en los navegadores donde está disponible. Ten en cuenta que no todos los navegadores soportarán @supports

Esto demuestra una forma en la que podrías tomar un componente reutilizable y exponer un mecanismo para reemplazar estilos para componentes dentro del componente usando un prop llamado styleOverrides.

El bit clave aquí es pasar styleOverrides al prop theme de ThemeProvider. Porque es posible que todavía necesites usar el theme para otras cosas, es bueno para el espacio de nombres de estos (como se muestra en este ejemplo).

A continuación, puedes escribir una pequeña función auxiliar (getStyleOverrides) Para añadir esta capacidad de modificación a cada uno de sus componentes glamorous. Incluso funciona con el prop css!

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:

<Text faded superheading>faded superheading</Text>
<Text heading>heading</Text>

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.