Now we can customize CSS for standard lightning base components using styling hooks.

What are Styling Hooks

Styling hooks use CSS custom properties which make it easy to customize component styling. We can use CSS Custom Properties as hooks to customize the SLDS component with your style.

Where can I find Styling Hooks?

You can find styling hooks for base lightning components on the SLDS website. For example to find styling hooks for lightning-button base components navigate to Lightning Component Library and in the documentation section, you can find “Customize Component Styling” here you will find styling hooks for that component as shown below.

How does a Styling Hook look like

--sds-c-button-brand-color-background : violet;

How to use a Styling Hooks

Styling hooks can be used in many ways, have a look at the example below

<template>
	<lightning-button class="button" variant="brand" label="Custom" title="custom"></lightning-button>
</template>

lightning-button.button {
	--sds-c-button-brand-color-background: #bb00ff;
    --sds-c-button-text-color: #f4f7f9;
}

In the above example, I aim to change the lightning-button color to violet.

Learn more about styling hooks

Reference links

• Styling hooks
• Lightning Component Library
• SLDS
• LWC Documentation