Set consistent styling across many LWCs using styling hooks

csslightning-web-componentssldsslds-styling-hooks

This Style Components Using Lightning Design System Styling Hooks documentation illustrates how to set custom properties on an individual custom LWC to change the styling:

/* myBaseButton.css */
:host {
  --slds-c-button-brand-color-background: orange;
  --slds-c-button-brand-color-border: orange;
  /* Other CSS custom properties here */
}

and it looks like a lot more properties are now available.

Is there presently any way to define a set of a couple of dozen of these once and have them used in many custom components? Or is that what theming will allow:

What About Theming Custom Properties?

For Winter ‘21, component-level
customizations (e.g. –slds-c-*) will be the only custom properties
that will be available.

Global styling capabilities that allow theming are in the works but
not within the scope of Winter ‘21. When global styling is introduced,
it will be an additive feature that will not break any of your
existing styling hooks usage.

PS

Perhaps could be done via code similar to this How to let the end users override CSS of managed package's LWC? though I don't need the runtime switching.

PPS

Is this the best approach at the moment loading from a static resource using loadStyle?

Best Answer

I would avoid loadStyle "workaround" as it's essentially going around the design of LWC and there's no guarantee that behavior won't change or be blocked in a future update.

Instead, you can create a single css file that leverages these styling hooks and share it across all your LWCs.

Share CSS Style Rules

  • cssLibrary
    • cssLibrary.css
    • cssLibrary.js-meta.xml
/* define the styling hooks as you'd like */
:host {
    --slds-c-badge-color-background: #0c9dda;
    --slds-c-badge-text-color: #c21010;
    --slds-c-button-brand-color-background: orange;
    --slds-c-button-brand-color-border: orange;
  }

Then, in your custom LWC - you import the css

@import 'c/cssLibrary';

<template>
    <div class="slds-badge">Traveler</div>
    <div class="slds-badge">Welcoming</div>
    <lightning-button label="click me" variant="brand"></lightning-button>
</template>

enter image description here

You didn't mention community, bu figured I'd point out the --dxp styling hooks for Lightning Web Runtime (LWR) Sites, where you can set a single hook that affects both base & custom Lightning Web Components throughout.

<style>
  /**
   * Scoped to the root of the document and all its descendant elements.
   */
  :root {
    --sds-c-button-color-background: peachpuff;
  }
 
  /**
   * Scoped to any element with the class applied and all its descendant elements
   */
  .container {
    --sds-c-button-color-background: peachpuff;
  }
</style>

Though it does mention

We recommend using --dxp styling hooks to make general changes across the components in you site. But if the --dxp branding defaults don’t provide exactly what you need, you can use --sds styling hooks to fine-tune the appearance of individual components where necessary.

Related Topic