Personnaliser SLDS dans les Lightning Web Components (LWC) avec les Styling Hooks
Avis d'experts
15 janvier 2026
Le Salesforce Lightning Design System (SLDS) est le socle de l’expérience utilisateur Lightning. Il garantit une cohérence visuelle, une accessibilité et une réactivité exemplaires à travers toute la plateforme. Cependant, les besoins métiers ou les chartes graphiques d’entreprise exigent souvent une touche de personnalisation : un bouton d’une couleur spécifique, une densité d’information différente, ou une mise en exergue particulière.
Tenter de surcharger les styles SLDS de manière « sauvage » avec du CSS global est une pente glissante qui mène à des problèmes de maintenance et des comportements inattendus lors des mises à jour de Salesforce. Heureusement, le framework Lightning Web Components (LWC) offre des mécanismes propres et robustes pour étendre SLDS. Cet article se concentre sur la méthode la plus moderne et la plus durable : les Styling Hooks.
Pourquoi personnaliser SLDS ?
La personnalisation n’est pas un but en soi, mais une réponse à des problématiques précises.
- Contexte de branding et d’identité visuelle :
- Problématique : Une entreprise a une charte graphique très stricte (couleurs primaires/secondaires, typographies, espacements). L’interface Salesforce doit s’intégrer parfaitement à son écosystème digital pour offrir une expérience de marque unifiée.
- Solution : Appliquer les couleurs de la marque aux éléments interactifs comme les boutons, les liens, et les en-têtes de page pour renforcer l’identité visuelle.
- Contexte d’expérience utilisateur (UX) spécifique :
- Problématique : Un processus métier complexe nécessite des repères visuels forts qui n’existent pas en standard. Par exemple, mettre en évidence des dossiers « Urgent » avec une couleur rouge vif ou différencier visuellement les types de tâches dans une liste.
- Solution : Utiliser des styles personnalisés pour créer des indicateurs visuels (bordures, fonds de couleur, icônes spécifiques) qui guident l’utilisateur et accélèrent la prise de décision.
- Contexte de produits AppExchange (ISV) :
- Problématique : Un partenaire ISV qui développe une application sur l’AppExchange souhaite que son produit ait une identité visuelle distincte pour se démarquer des autres applications et de l’interface Salesforce standard.
- Solution : Créer un thème visuel unique pour son application, tout en conservant les principes d’ergonomie de SLDS.
Personnalisation SLDS : valeur business et technique pour chaque rôle
La personnalisation du style n’est pas qu’une affaire de développeurs. Elle a un impact direct sur plusieurs rôles.
- Développeurs Salesforce & architectes techniques :
- Valeur : Ils apprennent à implémenter des personnalisations maintenables, scalables et « release-proof ». En utilisant les Styling Hooks, ils évitent la dette technique et s’assurent que leurs composants ne « casseront » pas après une mise à jour de Salesforce. Pour l’architecte, c’est la garantie d’une gouvernance technique saine.
- Designers UI/UX et les Product Owners :
- Valeur : Ils peuvent concevoir des maquettes qui répondent précisément aux besoins utilisateurs sans être totalement contraints par le standard. Savoir ce qui est possible techniquement leur permet de créer des parcours utilisateurs plus efficaces et engageants, ce qui se traduit par une meilleure adoption de l’outil.
- Utilisateurs métiers :
- Valeur : C’est le bénéficiaire final. Une interface claire, alignée avec les processus et visuellement intuitive, réduit la charge cognitive, limite les erreurs et augmente la productivité et la satisfaction au quotidien.
Exemple concret : personnaliser un bouton SLDS dans un LWC
Pour personnaliser un composant Lightning, l’approche recommandée est d’utiliser les Styling Hooks. Ce sont des variables CSS (–slds-c-*-*) que Salesforce expose sur ses composants de base. Ils vous permettent de « crocheter » le style interne d’un composant depuis votre propre feuille de style CSS.
Voici notre bouton avant personnalisation :
Imaginons que votre charte graphique impose une couleur pour les actions principales.
myBrandedButton.html
Un template html simple contenant le bouton que l’on veut personnaliser.
myBrandedButton.css
C’est ici, dans le fichier css, que l’on définit les valeurs que l’on veut appliquer à nos Styling Hooks.
Nous pouvons appliquer une valeur personnalisée ou bien une valeur de variable définie par Salesforce.
Astuce de développeur : Pour trouver les hooks disponibles, la meilleure méthode est d’inspecter un composant standard dans les outils de développement de votre navigateur. Cherchez les variables CSS (–slds-c-…) dans l’onglet « Styles ». La documentation SLDS Design Tokens est également votre meilleure amie.
Voici notre bouton après personnalisation :
Quelles sont les limites des Styling Hooks dans SLDS ?
- Tous les attributs CSS ne sont pas exposés via un hook. Par exemple, vous ne pourrez pas changer la font-family ou la structure HTML interne d’un composant.
- Ils ne sont disponibles que pour les composants de base lightning-* qui sont construits sur le nouveau socle LWC (la plupart le sont aujourd’hui).
- À l’heure actuelle, SLDS 2 ne prend pas en charge l’utilisation des hooks.
Personnalisation maîtrisée, personnalisation durable
Personnaliser l’interface Salesforce n’est plus un tabou, à condition de le faire avec les bons outils et la bonne méthodologie. En tant qu’experts chez Comforth Easyfront, nous encourageons nos équipes à maîtriser les Styling Hooks comme outil principal pour aligner l’interface avec les besoins de la marque.
En adoptant ces pratiques, vous développerez non seulement des compétences techniques recherchées, mais vous créerez également des applications plus performantes, mieux adoptées et parfaitement intégrées à l’écosystème de vos clients.
