Exemples de la communautΓ©

TODO

Si vous avez un exemple de quelque chose que vous avez fait avec glamorous qui n'a pas vraiment Γ©tΓ© traitΓ© sur l'une des autres pages, alors n'hΓ©sitez pas Γ  ouvrir une pull request sur cette page !

CSS Grid

La meilleure solution pour la mise en page CSS

CSS Grid Layout est un outil de mise en page relativement nouveau pour le web. C'est incroyablement puissant et expressif et il permet de nouvelles mises en page qui étaient auparavant très difficiles ou totalement impossibles.

Dans cet exemple, nous utilisons la fonctionnalitΓ© @supports du CSS pour choisir CSS Grid dans les navigateurs lorsqu'il est disponible. Soyez conscient que tous les navigateurs ne supporteront pas @supports.

CodeSandbox

Accepter les surcharges de style

Comment exposer une API pour surcharger les styles d'un composant

Voici une explication de comment, avec un composant rΓ©utilisable, exposer un mΓ©canisme pour surcharger le style d'autres composants Γ  l'aide d'une propriΓ©tΓ© styleOverrides.

La partie essentielle est de passer styleOverrides Γ  la propriΓ©tΓ© theme du ThemeProvider glamorous. Parce que le theme sera utilisΓ© pour d'autres Γ©lΓ©ments de votre application, il est toujours bon de rajouter un namespace (comme le montre cet exemple).

Ensuite, vous pouvez Γ©crire un helper (getStyleOverrides) pour ajouter cette fonctionnalitΓ© de surcharge Γ  tous vos composants glamorous. Cela fonctionne aussi avec la propriΓ©tΓ© css !

CodeSandbox

Button

Un simple bouton stylisΓ©

Quelque chose d'aussi simple qu'un bouton peut avoir de nombreux Γ©lΓ©ments de styles qui lui sont propres. Cet exemple illustre comment isoler toute la logique de style en utilisant glamorous afin de facilement (rΓ©)utiliser votre superbe bouton n'importe oΓΉ dans votre application, sans conflit de style.

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

Contributeurs:

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