# Styliser votre application

Découvrez comment personnaliser les composants d'interface utilisateur dans votre application.

Vous pouvez définir le style d’une application Stripe à l’aide des tokens de design que nous vous fournissons. Ils vous aident à reproduire l’apparence du Dashboard, proposent une expérience cohérente et garantissent un niveau de qualité élevé.

- Les composants `Box` et `Inline` prennent en charge les [styles personnalisés](https://docs.stripe.com/stripe-apps/style.md#custom-styles).
- D’autres composants ont des [styles prédéfinis](https://docs.stripe.com/stripe-apps/style.md#preset-styles) que vous pouvez parfois ajuster.

## Styles personnalisés

Les composants [Box](https://docs.stripe.com/stripe-apps/components/box.md) et [Inline](https://docs.stripe.com/stripe-apps/components/inline.md) prennent en charge les styles personnalisés. `Box` et `Inline` sont des conteneurs stylisables comme `div` et `span` en HTML. Pour leur attribuer un style, servez-vous de leur propriété `css`. Ils utilisent la syntaxe de CSS, avec quelques différences par rapport à la CSS Vanilla.

Contrairement au CSS classique, vous ne pouvez pas choisir librement des polices et styles. Utilisez les propriétés `font` et `fontWeight`. Pour en savoir plus, consultez [Typographie](https://docs.stripe.com/stripe-apps/style.md#typography).

En outre, la mise en page ne fonctionne pas de la même façon qu’avec le CSS vanilla. Stripe Apps utilise le même système de mise en page que Stripe utilise en interne. Pour en savoir plus, consultez la section [Mise en page](https://docs.stripe.com/stripe-apps/style.md#layout).

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'medium',
  }}
>
  <Box css={{width: '1/4', padding: 'medium', keyline: 'neutral'}} />
  <Box css={{width: '3/4', padding: 'medium', keyline: 'neutral'}} />
</Box>
```

Tous les tokens de style sont présentés via TypeScript, ce qui signifie que vous disposerez d’une liste déroulante dans votre éditeur pour effectuer une saisie automatique à partir des valeurs disponibles.

## Couleur

Configurez des couleurs dans vos styles personnalisés en utilisant les valeurs suivantes.

### Arrière-plans

Pour définir la couleur d’arrière-plan d’un composant [Box](https://docs.stripe.com/stripe-apps/components/box.md) ou [Inline](https://docs.stripe.com/stripe-apps/components/inline.md), utilisez la propriété CSS `backgroundColor`&nbsp;:

```jsx
<Box css={{ backgroundColor: 'container' }}>
  Box with a darker background.
</Box>
```

Utilisez les tokens suivants comme valeurs pour `backgroundColor`&nbsp;:

### Bordures

Pour ajouter une bordure à un composant [Box](https://docs.stripe.com/stripe-apps/components/box.md) or [Inline](https://docs.stripe.com/stripe-apps/components/inline.md), utilisez la propriété CSS `keyline`&nbsp;:

```jsx
<Box css={{ keyline: 'neutral' }}>
  Box with a neutral border.
</Box>
```

Utilisez les tokens suivants comme valeurs pour `keyline`&nbsp;:

### Texte et icônes

Pour définir une couleur pour l’ensemble des textes ou icônes d’un composant [Box](https://docs.stripe.com/stripe-apps/components/box.md) ou [Inline](https://docs.stripe.com/stripe-apps/components/inline.md), utilisez la propriété CSS `color`&nbsp;:

```jsx
<Box css={{ color: 'success' }}>
  Box with green text.
</Box>
```

Pour obtenir une icône contrastant avec les autres enfants de son conteneur, utilisez `fill`. Sinon, les icônes auront la même couleur que le texte qui les entoure.

```jsx
<Box css={{ color: 'primary' }}>
  <Icon css={{ fill: 'success' }}/>
  Box with normal text and a green icon.
</Box>
```

Utilisez les tokens suivants comme valeurs pour `color` et `fill`&nbsp;:

## Typographie

Pour modifier le style d’un texte dans un composant [Box](https://docs.stripe.com/stripe-apps/components/box.md) ou [Inline](https://docs.stripe.com/stripe-apps/components/inline.md), utilisez la propriété personnalisée `font`&nbsp;:

```jsx
<Inline css={{font: 'heading'}}>Heading</Inline>
```

Les styles suivants sont disponibles&nbsp;:

### Débordement et habillage du texte

Pour modifier la manière dont le texte de débordement est géré dans un composant [Box](https://docs.stripe.com/stripe-apps/components/box.md), utilisez les propriétés `textOverflow`, `overflow`, `whiteSpace` et `overflowWrap`&nbsp;:

```jsx
<Box css={{textOverflow: 'ellipsis', overflow: 'hidden', overflowWrap: 'normal'}}>
  Box where long text is cut off with an ellipsis
</Box>
```

Pour voir plus de scénarios de débordement et d’habillage de texte, consultez la page [Wrapping and Breaking Text](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text).

### Modification de la capitalisation du texte

Vous pouvez modifier la capitalisation du texte dans un composant [Box](https://docs.stripe.com/stripe-apps/components/box.md) ou [Inline](https://docs.stripe.com/stripe-apps/components/inline.md) en utilisant la propriété `textTransform`&nbsp;:

```jsx
<Box css={{textTransform: 'uppercase'}}>
  Box where all text appears uppercase
</Box>
```

Voici quelques valeurs couramment utilisées pour la propriété `textTransform`&nbsp;:

Consultez la rubrique [text-transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) pour voir la liste complète.

### Alignement du texte

Vous pouvez modifier l’alignement du texte dans un composant [Box](https://docs.stripe.com/stripe-apps/components/box.md) en utilisant la propriété `textAlign`&nbsp;:

```jsx
<Box css={{textAlign: 'center'}}>
  Box where text is centered
</Box>
```

Utilisez les valeurs de token suivantes pour `textAlign`&nbsp;:

## Disposition

L’API de mise en page pour Stripe Apps vous permet de créer des styles qui tirent profit de nos tokens de conception, et apporte d’autres améliorations pour CSS Vanilla. Utilisez ces tokens dans un composant [Box](https://docs.stripe.com/stripe-apps/components/box.md) pour contrôler la mise en page pour ses enfants. D’autre conteneurs, comme le composant [List](https://docs.stripe.com/stripe-apps/components/list.md), gèrent la mise en page automatiquement.

Nous employons le terme «&nbsp;empilements&nbsp;» pour désigner les différentes mises en page.

### Empilements horizontaux

Pour empiler des éléments horizontalement en faisant correspondre les largeurs&nbsp;:

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'medium',
    alignX: 'stretch', // This is the default and can be omitted
  }}
>
```

Pour empiler des éléments horizontalement avec des largeurs sous forme de fraction&nbsp;:

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'medium',
  }}
>
  <Box css={{width: '1/4', padding: 'medium', keyline: 'neutral'}} />
  <Box css={{width: '3/4', padding: 'medium', keyline: 'neutral'}} />
</Box>
```

Pour empiler des éléments horizontalement avec une largeur sous forme de fraction pour un élément et le reste des éléments étirés&nbsp;:

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'medium',
  }}
>
  <Box css={{padding: 'medium', keyline: 'neutral'}} />
  <Box css={{width: '1/4', padding: 'medium', keyline: 'neutral'}} />
  <Box css={{padding: 'medium', keyline: 'neutral'}} />
</Box>
```

Pour aligner des éléments en début de page en insérant un espacement&nbsp;:

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'medium',
    alignX: 'start',
  }}
>
```

Pour distribuer des éléments&nbsp;:

```jsx
<Box
  css={{
    stack: 'x',
    distribute: 'space-between',
  }}
>
```

Pour aligner des éléments en fin de page en insérant un espacement&nbsp;:

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'medium',
    alignX: 'end',
  }}
>
```

Pour aligner des éléments de manière verticale en bas de page&nbsp;:

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'medium',
    alignX: 'start',
    alignY: 'bottom',
  }}
>
```

Pour inclure des séparateurs entre les éléments&nbsp;:

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'small',
    alignX: 'start',
  }}
>
  <Box css={{padding: 'medium', keyline: 'neutral'}} />
  <Divider />
  <Box css={{padding: 'medium', keyline: 'neutral'}} />
  <Divider />
  <Box css={{padding: 'medium', keyline: 'neutral'}} />
</Box>
```

Pour inclure des postes dans des lignes&nbsp;:

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'medium',
    wrap: 'wrap',
    alignX: 'start',
  }}
>
```

Pour avoir un espacement horizontal et vertical différent&nbsp;:

```jsx
<Box
  css={{
    stack: 'x',
    gapX: 'small',
    gapY: 'large',
    wrap: 'wrap',
    alignX: 'start',
  }}
>
```

Pour centrer des éléments horizontalement lors de l’habillage&nbsp;:

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'medium',
    wrap: 'wrap',
    alignX: 'center',
  }}
>
```

Pour centrer des éléments verticalement lors de l’habillage&nbsp;:

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'medium',
    wrap: 'wrap',
    alignX: 'start',
    alignY: 'center',
  }}
>
```

### Empilements verticaux

Pour empiler des éléments verticalement en faisant correspondre les largeurs&nbsp;:

```jsx
<Box
  css={{
    stack: 'y',
    gap: 'medium',
  }}
>
```

Pour empiler des éléments verticalement alors qu’ils sont centrés horizontalement&nbsp;:

```jsx
<Box
  css={{
    stack: 'y',
    gap: 'medium',
    alignX: 'center',
  }}
>
  <Box css={{width: '1/4', padding: 'medium', keyline: 'neutral'}} />
  <Box css={{width: '2/3', padding: 'medium', keyline: 'neutral'}} />
  <Box css={{width: '1/3', padding: 'medium', keyline: 'neutral'}} />
</Box>
```

### Empilements en cascade

Pour afficher les éléments les uns au-dessus des autres&nbsp;:

```jsx
<Box
  css={{
    stack: 'z',
    alignX: 'center',
    alignY: 'center',
  }}
>
  <Box css={{padding: 'xxlarge', keyline: 'neutral'}} />
  <Box css={{padding: 'large', keyline: 'neutral'}} />
  <Box css={{padding: 'small', keyline: 'neutral'}} />
</Box>
```

### Propriétés de mise en page

| Propriété               | Valeurs                                                                              |
| ----------------------- | ------------------------------------------------------------------------------------ |
| `alignX`                | `'start' | 'center' | 'end' | 'stretch'`                                             |
| `alignY`                | `'top' | 'center' | 'baseline' | 'bottom' | 'stretch'`                               |
| `distribute`            | `'space-between' | 'packed'`                                                         |
| `gap`                   | Consultez la page [Espacement](https://docs.stripe.com/stripe-apps/style.md#spacing) |
| `overflowX | overflowY` | `'visible' | 'hidden' | 'scroll' | 'auto'`                                           |
| `stack`                 | `'x' | 'y' | 'z'`                                                                    |
| `wrap`                  | `'wrap'`                                                                             |

## Espacement

Vous pouvez définir les marges extérieures, les marges intérieures et les espacements de mise en page à l’aide des valeurs indiquées ci-après.

```jsx
<Box css={{margin: 'small'}} />
```

| Token     | Valeur     |
| --------- | ---------- |
| `0`       | 0&nbsp;px  |
| `xxsmall` | 2&nbsp;px  |
| `xsmall`  | 4&nbsp;px  |
| `small`   | 8&nbsp;px  |
| `medium`  | 16&nbsp;px |
| `large`   | 24&nbsp;px |
| `xlarge`  | 32&nbsp;px |
| `xxlarge` | 48&nbsp;px |

## Dimensionnement

Vous pouvez définir la largeur et la taille à l’aide de fractions ou de tokens de dimensionnement basés sur le contenu.

```jsx
<Box css={{width: '1/2'}} />
```

### Dimensionnement fractionnel

Les fractions disponibles sont les moitiés, les tiers, les quarts, les cinquièmes, les sixièmes et les douzièmes. Le token `fill` permet à un composant de s’adapter à la taille de son conteneur.

| Token                                                                                    | Valeur                                                                                                                                                                         |
| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `0`                                                                                      | 0&nbsp;px                                                                                                                                                                      |
| `1/2`                                                                                    | 50&nbsp;%                                                                                                                                                                      |
| `1/3`, `2/3`                                                                             | 33,333333&nbsp;%, 66,666667&nbsp;%                                                                                                                                             |
| `1/4`, `2/4`, `3/4`,                                                                     | 25&nbsp;%, 50&nbsp;%, 75&nbsp;%                                                                                                                                                |
| `1/5`, `2/5`, `3/5`, `4/5`                                                               | 20&nbsp;%, 40&nbsp;%, 60&nbsp;%, 80&nbsp;%                                                                                                                                     |
| `1/6`, `2/6`, `3/6`, `4/6`, `5/6`                                                        | 16,666667&nbsp;%, 33,333333&nbsp;%, 50&nbsp;%, 66,666667&nbsp;%, 83,333333&nbsp;%                                                                                              |
| `1/12`, `2/12`, `3/12`, `4/12`, `5/12`, `6/12`, `7/12`, `8/12`, `9/12`, `10/12`, `11/12` | 8,333333&nbsp;%, 16,666667&nbsp;%, 25&nbsp;%, 33,333333&nbsp;%, 41,666667&nbsp;%, 50&nbsp;%, 58,333333&nbsp;%, 66,666667&nbsp;%, 75&nbsp;%, 83,333333&nbsp;%, 91,666667&nbsp;% |
| `fill`                                                                                   | 100&nbsp;%                                                                                                                                                                     |

### Dimensionnement basé sur le contenu

Vous pouvez dimensionner une `Box` selon son contenu.

| Token | Utilisation                                                                                                                                                                                                 |
| ----- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `min` | Le contenu du composant tire parti de toutes les possibilités de mise en forme, jusqu’à devenir aussi petit que le plus long des contenus.                                                                  |
| `max` | Représente la largeur maximale possible du contenu. Lorsqu’elle est appliquée au texte, celui-ci ne change pas de format, même si cela a pour effet de le faire dépasser hors des limites de son conteneur. |
| `fit` | Remplit l’espace disponible, jusqu’à la taille maximale du contenu uniquement.                                                                                                                              |

## Styles prédéfinis

Les composants autres que `Box` et `Inline` disposent de styles prédéfinis, ce qui permet de conserver une expérience cohérente. Vous pouvez parfois contrôler ou annuler les réglages prédéfinis d’une certaine façon.

### Stylisation automatique

Certains composants disposent de styles appliqués automatiquement. Par exemple, les [puces](https://docs.stripe.com/stripe-apps/components/chip.md) changent automatiquement d’apparence en fonction des rappels qu’elles implémentent. Cela permet à l’utilisateur de comprendre leur comportement. Afin d’éviter toute confusion, vous ne pouvez pas remplacer ces informations.

### Plusieurs réglages prédéfinis

Certains composants, tels que les [Buttons](https://docs.stripe.com/stripe-apps/components/button.md), ont plusieurs styles que vous pouvez sélectionner en utilisant une propriété. Consultez la documentation de chaque composant pour en savoir plus.

### CSS limité

Certains composants prennent en charge des propriétés CSS spécifiques. Par exemple, les [Icons](https://docs.stripe.com/stripe-apps/components/icon.md) prennent en charge les couleurs en utilisant la propriété `fill`. Consultez la documentation de chaque composant pour en savoir plus.

## See also

- [Documentation de l’API Extension SDK](https://docs.stripe.com/stripe-apps/reference/extensions-sdk-api.md)
- [Composants d’interface utilisateur Stripe Apps](https://docs.stripe.com/stripe-apps/components.md)
- [Créer une interface utilisateur](https://docs.stripe.com/stripe-apps/build-ui.md)