Ejemplos de la comunidad

TODO

Si tienes un ejemplo de algo que has hecho con glamorous que realmente no ha sido tratado en una de las otras pΓ‘ginas, entonces no dude en abrir un pull request en esta pΓ‘gina!

CSS Grid

La mejor soluciΓ³n para el diseΓ±o CSS

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

CodeSandbox

Aceptar modificaciones de estilo

CΓ³mo exponer una API para reemplazar los estilos en un componente

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!

CodeSandbox

Button

There is no translation for this. Can you help translate it?

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

There is no translation for this. Can you help translate it?

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

There is no translation for this. Can you help translate it?

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

There is no translation for this. Can you help translate it?

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

There is no translation for this. Can you help translate it?

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

There is no translation for this. Can you help translate it?

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

react-transition-group

There is no translation for this. Can you help translate it?

An example of using glamorous together with react-transition-group

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

Contribuidores

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