4

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?

2 Answers 2

5

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.

1
  • Thanks Kris, I take your point of needing to stay away from things that work today but may not tomorrow. Will go with what you have shown. And also look at the --dxp stuff.
    – Keith C
    Commented Apr 26, 2022 at 15:24
0

All I ever see are examples of buttons. Is there an example of a div? And is it "sds" or "slds", seems like there typos in some places and not in others.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .