API de glamorous

glamorous

This translation is out of date.
Can you help update it?

Thanks for your interest in helping to update the website translations! The link below will take you to GitHub showing all the changes that happened between the last time /pages/api/content/fr/glamorous.md was updated to when the /pages/api/content/glamorous.md was most recently updated. Unfortunately this includes all file changes, not just changes in /pages/api/content/fr/glamorous.md. So you'll have to click the "Files changed" tab, then search for /pages/api/content/fr/glamorous.md in the changes. Then you can open the editor link to update the translation. Thanks again!!

glamorousComponentFactory

This translation is out of date.
Can you help update it?

Thanks for your interest in helping to update the website translations! The link below will take you to GitHub showing all the changes that happened between the last time /pages/api/content/fr/glamorous-component-factory.md was updated to when the /pages/api/content/glamorous-component-factory.md was most recently updated. Unfortunately this includes all file changes, not just changes in /pages/api/content/fr/glamorous-component-factory.md. So you'll have to click the "Files changed" tab, then search for /pages/api/content/fr/glamorous-component-factory.md in the changes. Then you can open the editor link to update the translation. Thanks again!!

Si vous en créez un vous-même ou utilisez l'un des éléments intégrés mentionnés ci-dessus, chaque glamorousComponentFactory vous permet de l'appeler avec des styles et vous renvoie un nouveau composant qui aura ces styles appliqués lors de son rendu. Ceci est réalisé par la génération d'un className pour les styles donnés et par le transfert du className sur l'élément rendu. Donc, si vous enveloppez un composant que vous avez l'intention de styliser, vous devez vous assurer que vous acceptez le className comme une prop et que vous l'appliquez à l'endroit où vous voulez que les styles soient appliqués dans votre composant personnalisé (normalement l'élément racine).

const UnstyledComp = ({ className, children }) => <div className={`\${className} other-class`}>{children}</div>
const MyStyledComp = glamorous(UnstyledComp)({ margin: 1 })

<MyStyledComp>content</MyStyledComp>
// rendu : <div class="<glamor-generated-class> other-class">content</div>
// styles appliqués : {margin: 1}
...styles

Le glamorousComponentFactory accepte n'importe quel nombre d'arguments d'objets de style. Ceux-ci peuvent être des objets de style ou des fonctions qui sont appelés avec des props sur tous ceux rendus et elles retournent des objets de style. Pour en savoir plus sur ces objets de style, regardez la documentation de glamor.

const MyStyledDiv = glamorous.div(
  {
    margin: 1,
  },
  (props) => ({
    padding: props.noPadding ? 0 : 4,
  })
)

<MyStyledDiv /> // styles appliqués : {margin: 1, padding: 4}
<MyStyledDiv noPadding /> // styles appliqués : {margin: 1, padding: 0}

Astuce

Astuce : glamorous prend simplement ces objets de style et les transmet à glamor. Ensuite, glamor les fusionnera ensemble comme vous le souhaitez. Une bonne pratique que vous pouvez faire, c'est de spécifier un tableau d'objets de style et glamor le traitera exactement de la même façon. C'est plus expressif ! Consultez les exemples pour voir comment cela fonctionne.

Vous pouvez également spécifier d'autres classes que vous souhaitez appliquer au composant. Si ces classes sont générées par glamor, leurs styles seront fusionnés avec le style de glamor, sinon le nom de la classe sera simplement transmis. Par exemple :

const className1 = glamor.css({paddingTop: 1, paddingRight: 1}).toString()
const styles2 = {paddingRight: 2, paddingBottom: 2}
const className3 = glamor.css({paddingBottom: 3, paddingLeft: 3}).toString()
const styles4 = {paddingLeft: 4}
const styles5 = props => (props.active ? 'active' : 'not-active')
const MyStyledDiv = glamorous.div(
  className1,
  styles2,
  className3,
  styles4,
  styles5,
  'extra-thing',
)
<MyStyledDiv /> // styles appliqués : {padding-top: 1, padding-right: 2, padding-bottom: 3, padding-left: 4}, 'not-active' et tout ce qui vient de `extra-thing`.

TypeScript

This translation is out of date.
Can you help update it?

Thanks for your interest in helping to update the website translations! The link below will take you to GitHub showing all the changes that happened between the last time /pages/api/content/fr/typescript.md was updated to when the /pages/api/content/typescript.md was most recently updated. Unfortunately this includes all file changes, not just changes in /pages/api/content/fr/typescript.md. So you'll have to click the "Files changed" tab, then search for /pages/api/content/fr/typescript.md in the changes. Then you can open the editor link to update the translation. Thanks again!!

Utilisation des définitions TypeScript de glamorous

Les définitions TypeScript actuelles sont incomplètes et reposent sur les besoins des développeurs qui ont contribué.

Les pull requests pour les améliorer sont les bienvenues et appréciées. Si vous n'avez jamais contribué à l'open source, vous pouvez consulter cette vidéo gratuite qui est très utile.

Support complet

Config

  • useDisplayNameInClassName

Styles dynamiques

Pour utiliser des styles dynamiques avec des props personnalisées, utilisez des génériques. Exemple:

const MyStyledDiv = glamorous.div<{noPadding?: boolean}>(
  {
    margin: 1,
  },
  props => ({
    padding: props.noPadding ? 0 : 4,
  })
)

<MyStyledDiv /> // styles appliqués : {margin: 1, padding: 4}
<MyStyledDiv noPadding /> // styles appliqués : {margin: 1, padding: 0}

Support incomplet

Sécurité de propriété CSS

  • les pseudo-classes
  • les pseudo-éléments
  • les sélecteurs de CSS relationnels
  • Les Media Queries

Toutes celles-là fonctionnent, cependant, vous obtenez seulement une sûreté du typage et la capacité d'utiliser intelliSense sur les simples clés CSS des props (voir le typage css).

Dans l'avenir cela pourra devenir possible avec Microsoft/TypeScript#6579

Alternativement le support complet pour la sûreté du typage serait possible à l'aide de patterns qui suivent les grandes lignes décrites par http://typestyle.io/.

Fabrique de composant du DOM

Le support actuel est limité à div et svg.

Support inconnu

Animations

Support possible via les typages de glamors

Aucun support

  • GlamorousComponents

Problèmes connus

Generation des fichiers de définition

Lorsque vous utilisez glamorous dans une bibliothèque qui vous génére des fichiers de définition vous devrez inclure l'import et l'export suivants pour contourner un problème de typescript Microsoft/TypeScript/issues/5938.

import glamorous, { ExtraGlamorousProps as Unused } from "glamorous"
export { Unused }