Lightning Styling Hooks

You can use Lightning Styling Hooks to style standard LWC components provided by Salesforce that you wouldn’t necessarily want to write from scratch to make minor adjustments, such as background color or the border radius change.

Which components can be styled this way?

lightning-button lightning-card lightning-icon ...and many more - a full list of supported components can be found in the official documentation (link in the post).

Let’s check an example

Change the colors and border radius of every lightning-button (with neutral variant) inside the component

:host {
    --slds-c-button-neutral-color-border: #0064e1;
    --slds-c-button-neutral-color-border-active: #0064e1;
    --slds-c-button-neutral-color-border-hover: #92baec;
    --slds-c-button-radius-border: 20px;
}

Change the colors and border radius of all neutral lightning-buttons that are children of the element with class=“container”

.container {
    --slds-c-button-neutral-color-border: #0064e1;
    --slds-c-button-neutral-color-border-active: #0064e1;
    --slds-c-button-neutral-color-border-hover: #92baec;
    --slds-c-button-radius-border: 20px;
}

Change the colors and border radius of the specific neutral button with class=”custom-button”

.custom-button {
    --slds-c-button-neutral-color-border: #0064e1;
    --slds-c-button-neutral-color-border-active: #0064e1;
    --slds-c-button-neutral-color-border-hover: #92baec;
    --slds-c-button-radius-border: 20px;
}