Guides avancΓ©s

Voici quelques-unes des choses les plus avancΓ©es que vous pouvez faire avec glamorous

innerRef

Comment accΓ©der au ref

Parfois, vous avez besoin d'accΓ©der au ref du composant qui est rendu. Vous pouvez accomplir cela avec la prop innerRef.

C'est une fonction, et si elle est fournie, elle sera appelΓ©e avec la rΓ©fΓ©rence de l'Γ©lΓ©ment intΓ©rieur.

Un input dans un form

Travailler avec un CSS existant

Souvent, vous allez ajouter glamorous dans un projet existant qui utilise dΓ©jΓ  un CSS global. Pour ce cas, beaucoup d'API de glamorous facilitent le plus possible ce travail.

Rappelez-vous de ceci

Le but est de styliser les composants et rΓ©utiliser ces composants en ayant du CSS dans du JS. Avec cela en tΓͺte, si vous avez besoin de styliser l'ensemble de votre application (comme html/body ou ajouter des styles reset), vous ne le ferez pas avec glamorous. Au lieu de cela, vous pouvez utiliser un CSS ordinaire ou l'API de glamor pour injecter des styles globaux.

En plus, plutΓ΄t que d'utiliser du CSS pour styliser une balise a avec un CSS global, vous devriez crΓ©er un composant Link avec tous les styles dont vous avez besoin et le rΓ©utiliser.

// TODO

ThΓ©matisation

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/advanced/content/fr/theming.md was updated to when the /pages/advanced/content/theming.md was most recently updated. Unfortunately this includes all file changes, not just changes in /pages/advanced/content/fr/theming.md. So you'll have to click the "Files changed" tab, then search for /pages/advanced/content/fr/theming.md in the changes. Then you can open the editor link to update the translation. Thanks again!!

CodeSandbox

Context

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

context is an unstable API and it's not recommended to use it directly. However, if you need to use it for some reason, here's an example of how you could do that:

const dynamicStyles = (props, context) => ({
  color: context.isLoggedIn ? 'green' : 'red'
})
const MyDiv = glamorous.div(dynamicStyles)
MyDiv.contextTypes = {
  isLoggedIn: PropTypes.string,
}

class Parent extends React.Component {
  getChildContext() {
    return {
      isLoggedIn: true,
    }
  }
  render() {
    return <MyDiv />
  }
}

Parent.childContextTypes = {
  isLoggedIn: PropTypes.string,
}

<Parent />
// renders <div />
// with {color: 'green'}

Optimisation de la taille du paquet

Si pour votre cas d'utilisation, la taille est vraiment une contrainte, alors vous pourriez envisager d'utiliser la "minuscule" version de glamorous pour votre application. C'est une version miniature de glamorous avec quelques restrictions :

  1. Aucune fabrique de composant intΓ©grΓ©e (glamorous.article({/* styles */ })) Donc, vous devez crΓ©er les votres (glamorous('article')({/* styles */ }))
  2. Aucun composant intΓ©grΓ© de glamorous (glamorous.Span)
  3. Aucune prop de filtrage pour les styles dynamiques, au lieu de cela, vous les placerez sur une prop glam (voir l'exemple ci-dessous).
  4. Si vous avez besoin de ThemeProvider ou de withTheme, vous devrez les importer manuellement. Ils ne sont pas exportΓ©s comme faisant partie de glamorous/ tiny Γ  l'inverse de glamorous.

Voici un exemple de ce que vous pouvez faire avec lui.

import React from 'react'
import glamorous from 'glamorous/dist/glamorous.es.tiny'

const Comp = glamorous('div')({
  color: 'red'
}, (props) => ({
  fontSize: props.glam.big ? 20 : 12
}))
function Root() {
  return (
    <Comp
      glam={{ big: true }}
      thisWillBeForwardedAndReactWillWarn
    >
      ciao
    </Comp>
  )
}

export default Root

ExpΓ©rience amΓ©liorΓ©e

Il est recommandΓ© d'utiliser soit babel-plugin-module-resolver ou le resolve.alias de config avec webpack afin de ne pas importer depuis ce chemin complet.

Vous disposez des options disponibles suivantes pour cette importation :

  1. glamorous/dist/glamorous.es.tiny.js - Γ  utiliser si vous utilisez Webpack@>=2 ou Rollup
  2. glamorous/dist/glamorous.cjs.tiny.js - Γ  utiliser si vous n'utilisez pas la transpilation ESModules
  3. glamorous/dist/glamorous.umd.tiny.js - Γ  utiliser si vous l'incluez dans un balise script. (Il y a aussi une version .min.js).

La taille actuelle de glamorous/dist/glamorous.umd.tiny.min.js est : tiny size tiny gzip size

Remarque importante

Comme glamorous dΓ©pend de glamor, si vous n'avez pas encore glamor, vous devrez tenir compte de la taille globale en l'ajoutant Γ  votre application. La taille actuelle de glamor/umd/index.min.js est : glamor size glamor gzip size

Rendu cΓ΄tΓ© serveur

Comme glamor et react prennent tous les deux en charge le rendu cΓ΄tΓ© serveur ou SSR (Server-Side Render), glamorous le fait aussi ! J'ai fait cela sur mon site personnel qui est gΓ©nΓ©rΓ© au moment de la construction sur le serveur. Apprenez-en plus sur le rendu de react sur le serveur et aussi de glamor.

Contributeurs:

kentcdodds's GitHub avatarpaulmolluzzo's GitHub avatarJReinhold's GitHub avatar