Concepts de base

Une brève introduction à glamorous

Motivation

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

Why does glamorous exist?

The Problem

You like CSS in JS, but you don't like having to create entire component functions just for styling purposes. You don't want to give a name to something that's purely style-related. And it's just kind of annoying to do the style-creating, className assigning, and props-forwarding song and dance.

For example, this is what you have to do with raw glamor (or aphrodite or similar for that matter):

const styles = glamor.css({
  fontSize: 20,
  textAlign: 'center',
})
function MyStyledDiv({className = '', ...rest}) {
  return (
    <div
      className={`${styles} ${className}`}
      {...rest}
    />
  )
}

This Solution

With glamorous, that example above looks as simple as this:

const MyStyledDiv = glamorous.div({
  fontSize: 20,
  textAlign: 'center',
})

In fact, it's even better, because there are a bunch of features that make composing these components together really nice!

Oh, and what if you didn't care to give MyStyledDiv a name? If you just want a div that's styled using glamor? You can do that too:

const { Div } = glamorous

function App() {
  return (
    <Div
      fontSize={20}
      textAlign="center"
    >
      Hello world!
    </Div>
  )
}

Try this out in your browser here!

So that's the basics of this solution... Let's get to the details!

Installation

Ce module est distribuΓ© via npm qui est empaquetΓ© avec node et doit Γͺtre installΓ© comme une dΓ©pendance de votre projet :

npm install --save glamorous

Il dΓ©pend aussi de react et glamor donc vous aurez aussi besoin d'eux dans votre projet (si vous ne les possΓ©dez pas dΓ©jΓ ) :

npm install --save react glamor

REMARQUE : Si vous utilisez React v15.5 ou une version supΓ©rieure, vous aurez Γ©galement besoin de prop-types : npm install --save prop-types

Vous pouvez ensuite utiliser l'un des formats du module :

  • main: dist/glamorous.cjs.js - s'exporte en tant que module CommonJS
  • global: dist/glamorous.umd.js et dist/glamorous.umd.min.js - s'exporte en tant que module umd qui est consommable dans plusieurs environnements, le plus significatif de maniΓ¨re globale.
  • jsnext:main et le module : dist/glamorous.es.js - s'exporte en utilisant la spΓ©cification des modules ES, vous aurez besoin de configurer webpack pour faire usage de ce fichier, faites-le en utilisant la propriΓ©tΓ© resolve.mainFields.

Ce module est utilisΓ© le plus souvent via CommonJS :

const glamorous = require('glamorous')
const {ThemeProvider} = glamorous
// etc.

Si vous transpilez (et/ou en utilisant le jsnext:main) :

import glamorous, {ThemeProvider} from 'glamorous'

// vous pouvez aussi importer les composants spΓ©cifiques de Glamorous (Voir la section ci-dessous sur les composants "intΓ©grΓ©s")
import {Div, H2} from 'glamorous'

// les balises avec un nom identique Γ  un objet JavaScript intΓ©grΓ©s sont importables avec un suffixe Tag
// et les noms de balise qui contiennent des tirets sont transformΓ©s en CamelCase
import {MapTag, ColorProfile} from 'glamorous'

Si vous voulez l'utiliser de manière globale :

<!-- Charge les dΓ©pendances -->
<script src="https://unpkg.com/react/dist/react.js"></script>
<script src="https://unpkg.com/prop-types/prop-types.js"></script>
<script src="https://unpkg.com/glamor/umd/index.js"></script>
<!-- Charge la bibliothèque -->
<script src="https://unpkg.com/glamorous/dist/glamorous.umd.js"></script>
<script>
// Utilisez window.glamorous ici ...
const glamorous = window.glamorous
const {ThemeProvider} = glamorous
</script>

Getting Started

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

start using glamorous

Video Screenshot

Here is a basic example that shows you how to get started making component with css-in-js magic.

const { Div } = glamorous

function App() {
	return (
		<Div
			fontSize={20}
			textAlign="center"
		>
			Hello Glamorous!
		</Div>
	)
}

render(<App/>)
Hello Glamorous!

Concepts de base

Styles dynamiques + Styles statiques

Un des points agréables de glamorous, c'est qu'il vous permet de faire une séparation claire entre vos styles dynamiques et statiques en vous forçant à choisir entre un objet littéral et une fonction. Voici un exemple ayant à la fois des styles dynamiques et statiques :

const MyLink = glamorous.a(
  {
    color: 'blue',
    textDecoration: 'none',
  },
  ({size = 'small'}) => ({
    fontSize: size === 'big' ? 24 : 16,
  }),
  // vous pouvez continuer de fournir un nombre quelconque d'arguments
  // et ~glamor~ les fusionnera. En cas de conflit de
  // style, le dernier gagne.
)

Vous pouvez voir un aperçu en direct de cet exemple sur codesandbox.

Remarquez que vous pouvez Γ©galement utiliser des tableaux de styles si vous en avez besoin :
const MyDiv = glamorous.div(
  [
    {
      [phoneMediaQuery]: {
        lineHeight: 1.2,
      },
    },
    {
      [phoneMediaQuery]: {
        lineHeight: 1.3, // celui-ci gagnera car il vient après
      },
    },
  ],
  ({big, square}) => {
    const bigStyles = big ?
    {
      [phoneMediaQuery]: {
        fontSize: 20,
      },
    } :
      {}

    const squareStyles = square ?
    {
      [phoneMediaQuery]: {
        borderRadius: 0,
      },
    } :
    {
      [phoneMediaQuery]: {
        borderRadius: '50%',
      },
    }
    // remarquez que je retourne ici un tableau
    return [bigStyles, squareStyles]
  },
)

// le rΓ©sultat de <MyDiv big={true} square={false} /> sera :
// @media (max-width: 640px) {
//   .css-1bzhvkr,
//   [data-css-1bzhvkr] {
//     line-height: 1.3;
//     font-size: 20px;
//     border-radius: 50%;
//   }
// }
//
// <div
//   class="css-1bzhvkr"
// />

Animation

Pour faire de l'animation avec glamorous, vous pouvez utiliser pour des choses simples des transitions CSS ordinaires et pour des choses plus avancΓ©es, vous pouvez utiliser keyframes via l'API css.keyframes de glamour.

// import * as glamor from 'glamor'

// DΓ©finit les styles de l'animation
const animationStyles = props => {
	const bounce = glamor.css.keyframes({
		'0%': { transform: `scale(1.01)` },
		'100%': { transform: `scale(0.99)` }
	})
	return {animation: `${bounce} 0.2s infinite ease-in-out alternate`}
}

// Definit l'Γ©lΓ©ment
const AnimatedDiv = glamorous.div(animationStyles)

render(
	<AnimatedDiv>
		Bounce.
	</AnimatedDiv>
)
Bounce.
CodeSandbox

glamorous-native

React Native

glamorous offre une version pour les projets React Native appelΓ©e glamorous-native.

npm install glamorous-native --save

Vous pouvez en apprendre plus sur le projet glamorous-native.

Contributeurs:

kentcdodds's GitHub avatar