SharePoint Framework (SPFx) : Style personnalisé
Cet article est une traduction de l'article SharePoint Framework (SPFx) : Custom style rédigé par get2pallav.
Introduction
Lors de la création d'une solution SharePoint Framework, nous pouvons appliquer un look et un comportement personnalisés à l'aide de CSS. Cet article explique comment inclure le style dans la solution SPFx tel que suggéré par Microsoft.
Pour cet article, nous utilisons 'React' pour construire la solution SPFx.
Fichier SCSS
CSS et Sass peuvent tous deux être utilisés dans SPFx. Sass offre un certain nombre de fonctionnalités utiles telles que les variables, l'imbrication, etc. Si nous prévoyons d'utiliser Sass dans SPFx, le processus de compilation de gulp attend un format de nom de fichier spécifique pour la compilation.
Tous les Sass (extension de fichier SCSS) doivent être au format ci-dessous:
{File Name} .module.scss
"gulp build" / "gulp serve" va créer un fichier TypeScript pour notre SCSS qui peut être directement importé en tant que référence dans d'autres fichiers de code.
Le fichier typecript nouvellement généré aura une classe d'exportation `styles 'par défaut pour référencer tous les styles personnalisés.
Référencer le style
Référencez ces classes de style en tant qu'import pour les utiliser
Incluez ces classes de style classes dans l'attribut `className' de chaque élément
Dans le cas de plusieurs classes de style, utilisez la fonction 'Join'
Inclure des icônes
Pour inclure des icônes, nous allons créer une classe React distincte et inclure toutes les icônes. Notre classe a des fonctions statiques qui prennent un tableau de classes de style comme interface. Nous pouvons inclure plus de propriétés selon les besoins.
Référencer une classe d'icônes se déroule comme pour tout autre classe React.
Fournir le SVC au composant React sous forme de propriété pour qu'elle soit utilisée directement pour l'affichage
Pour afficher l'icône
Les icônes seront affichés comme suit
Anchor lever Style for all elements
A plusieurs reprises, nous avons besoin de définir des classes de style de premier supérieur pour des éléments tels que span, un bouton, etc. En combinant des modules CSS avec le support Sass pour les ensembles de règles d'imbrication, nous pouvons simplifier les styles CSS et nous assurer qu'ils n'affectent pas d'autres éléments sur la page. Nous pouvons envelopper toutes les classes dans une classe de premier niveau.
Et inclure directement la classe de premier niveau de sorte qu'elle s'applique à toutes les classes en dessous d'elles.
Tous les contrôles de saisie, les boutons etc. sous le div auront notre CSS personnalisé appliqué.
Rendu
Nous pouvons être sûrs qu'une fois que nous avons créé et déployé cette solution, elle n'affectera aucun autre style de composant WebPart, car le SharePoint Framework utilise des modules CSS. Lors de la création du projet, le SharePoint Framework traite tous les fichiers avec l'extension `.module.scss '. Pour chaque fichier, il lit tous les sélecteurs de classe et leur ajoute une valeur de hachage unique. Une fois terminé, il écrit les sélecteurs mis à jour dans les fichiers CSS intermédiaires inclus dans le bundle généré pour la webpart.
Références
