Update Lightning Base Components Styling

Lightning base components implement Salesforce Lightning Design System (SLDS) component blueprints and styling. The base components are available as Aura components and Lightning web components (LWC). Only the LWC versions of the base components work in LWR.

For SSR environments, base components can render in native shadow DOM or light DOM. Be aware that native shadow blocks global styles from being applied to individual components, which means that your existing styling rules sometimes don’t work as expected anymore. For a list of base components that support SSR, see Use Supported Lightning Base Components.

To achieve your styling goals in native shadow, use SLDS styling hooks that are assigned to specific parts of the component with the ::part CSS pseudo function.

Here’s an example of how you can modify your existing styling rules. Let's say you use SLDS styling hooks to customize the text colors on your buttons.

div.privacy lightning-button {
  --slds-c-button-brand-text-color-active: rgb(255, 255, 255);
  --sds-c-button-text-color: rgb(255, 255, 255);
  --slds-c-button-brand-text-color-hover: rgb(211, 211, 211);
  --sds-c-button-text-color-hover: rgb(211, 211, 211);
}

In this example, the values aren’t applied to lightning-button. The lightning-button component's internals become untargetable because of the native shadow boundary.

The previous example renders the following result:

Website that renders "got it" button text in blue instead of white.

In the footer, the got it button text renders in blue instead of white.

To fix this styling issue, apply ::part(button) with the same rules:

div.privacy lightning-button::part(button) {
  --slds-c-button-brand-text-color-active: rgb(255, 255, 255);
  --sds-c-button-text-color: rgb(255, 255, 255);
  --slds-c-button-brand-text-color-hover: rgb(211, 211, 211);
  --sds-c-button-text-color-hover: rgb(211, 211, 211);
}

Using ::part(button) results in the correct styles getting applied to the button.

Website that correctly renders "got it" button.

See Also

Lightning Design System: Styling Hooks on SLDS Components
Lightning Design System: Styling Hooks

Developer Preview Feature

Feature is available as a developer preview. Feature is not generally available unless or until Salesforce announces its general availability in documentation or in press releases or public statements. All commands, parameters, and other features are subject to change or deprecation at any time, with or without notice. Do not implement functionality developed with these commands or tools.

Update Lightning Base Components Styling

No Results