Partager via

Appliquer un style aux composants avec des thèmes modernes (version préliminaire)

  • Article

[Cette rubrique fait partie de la documentation en version préliminaire et peut faire l'objet de modifications.]

Les développeurs doivent pouvoir appliquer un style à leurs composants pour qu’ils ressemblent au reste de l’application dans laquelle ils sont inclus. Ils peuvent le faire lorsque les thèmes modernes sont en vigueur pour une application canevas (via la fonctionnalité Contrôles et thèmes modernes ) ou pour une application pilotée par modèle (via la nouvelle apparence actualisée). Utilisez les thèmes modernes, qui sont basés sur Fluent UI React v9, pour appliquer un style à votre composant. Cette approche est recommandée pour obtenir des performances et une expérience de thème optimales pour votre composant.

Il existe quatre manières différentes d’appliquer des thèmes modernes à votre composant.

Contrôles Fluent UI v9

L’encapsulation des contrôles Fluent UI v9 en tant que composant est la manière la plus simple d’utiliser des thèmes modernes, car le thème moderne est automatiquement appliqué à ces contrôles. La seule condition préalable est de vous assurer que votre composant ajoute une dépendance sur les contrôles React et bibliothèques de la plateforme (version préliminaire), comme indiqué ci-dessous. Cette approche permet à votre composant d’utiliser les mêmes bibliothèques React et Fluent que la plateforme, et donc de partager le même contexte React qui transmet les jetons de thème au composant.

<resources>
  <code path="index.ts" order="1"/>
  <!-- Dependency on React controls & platform libraries -->
  <platform-library name="React" version="16.8.6" />
  <platform-library name="Fluent" version="9.46.2" />
</resources>

Contrôles Fluent UI v8

Fluent fournit un chemin de migration pour appliquer les constructions de thème v9 lorsque vous utilisez les contrôles Fluent UI v8 dans votre composant. Utilisez la fonction createV8Theme incluse dans le Package de migration de Fluent v8 à v9 pour créer un thème v8 basé sur les jetons de thème v9, comme indiqué dans l’exemple suivant :

const theme = createV8Theme(
  context.fluentDesignLanguage.brand,
  context.fluentDesignLanguage.theme
);
return <ThemeProvider theme={theme}></ThemeProvider>;

Contrôles autres que Fluent UI

Si votre composant n’utilise pas Fluent UI, vous pouvez créer une dépendance directement sur les jetons de thème v9 disponibles via le paramètre de contexte fluentDesignLanguage. Utilisez ce paramètre pour accéder à tous les jetons de thème afin de pouvoir référencer n’importe quel aspect du thème pour appliquer un style à lui-même.

<span style={{ fontSize: context.fluentDesignLanguage.theme.fontSizeBase300 }}>
  {"Stylizing HTML with platform provided theme."}
</span>

Fournisseurs de thèmes personnalisés

Lorsque votre composant nécessite un style différent du thème actuel de l’application, créez votre propre FluentProvider et transmettez votre propre ensemble de jetons de thème à utiliser par votre composant.

<FluentProvider theme={context.fluentDesignLanguage.tokenTheme}>
  {/* your control */}
</FluentProvider>

Exemples de contrôles

Des exemples pour chacun de ces cas d’utilisation sont disponibles dans Contrôle de l’API de thèmes modernes.

FAQ

Cette section contient des questions fréquentes. Si vous avez une question sur cette fonctionnalité, utilisez le bouton Commentaires pour Cette page au bas de cette page. pour créer un problème GitHub.

Q : Mon contrôle utilise Fluent UI v9 et a une dépendance sur les bibliothèques de la plateforme, mais je ne souhaite pas utiliser de thèmes modernes. Comment puis-je le désactiver pour mon composant ?

R : vous pouvez le faire de deux manières différentes :

  1. Vous pouvez créer votre propre FluentProvider au niveau du composant

    <FluentProvider theme={customFluentV9Theme}>
  {/* your control */}
</FluentProvider>

  2. Vous pouvez encapsuler votre contrôle à l’intérieur de IdPrefixContext.Provider et définir votre propre valeur idPrefix. Cela empêche votre composant d’obtenir des jetons de thème de la plateforme.

    <IdPrefixProvider value="custom-control-prefix">
  <Label weight="semibold">This label is not getting Modern Theming</Label>
</IdPrefixProvider>

Q : Certains de mes contrôles Fluent UI v9 n’obtiennent pas de styles

R : les contrôles Fluent v9 qui dépendent du portail React doivent être réencapsulés dans le fournisseur de thèmes pour garantir que le style est correctement appliqué. Vous pouvez utiliser FluentProvider.

Q : Comment puis-je vérifier si les thèmes modernes sont activés ?

A : Vous pouvez vérifier si les jetons sont disponibles : context.fluentDesignLanguage?.tokenTheme. Dans les applications pilotées par modèle, vous pouvez également vérifier les paramètres de l’application : context.appSettings.getIsFluentThemingEnabled().

Thèmes (Référence de l’API Power Apps component framework)
Contrôle de l’API de thèmes modernes
Utiliser des thèmes modernes dans les applications canevas (version préliminaire)

Notes

Pouvez-vous nous indiquer vos préférences de langue pour la documentation ? Répondez à un court questionnaire. (veuillez noter que ce questionnaire est en anglais)

Le questionnaire vous prendra environ sept minutes. Aucune donnée personnelle n’est collectée (déclaration de confidentialité).