So today we will check what are Styling Hooks and how we can create Styling Hooks for Lightning Web Components. With existing Lightning Web Components its hard for the developers to do CSS customization. We need to use hacks to overwrite CSS and with any UI update they might stop working. So from Winter 21 Salesforce introduce Styling hooks.
Styling hooks provide a way for us to customize the default appearance of our LWC-based Base Components in a supported, maintainable, and intuitive way.

Styling hooks are powered by CSS Custom Properties, a standards-based way to define reusable style values that work well in an encapsulated, web component-based environment. A styling hook is a placeholder in the SLDS style sheet, for example, var(--sds-c-badge--color-background, #ecebea),
which enables us to customize the style using the corresponding --sds-c-badge-color-background
CSS custom property.
Naming Conventions
Styling hooks follows a specific naming convention to promote predictability and consistency. All of CSS custom properties adhere to the following convention:
COMPONENT_ELEMENT_CATEGORY_PROPERTY_ATTRIBUTE_STATE
Component
— [required] Name of the componentElement
— [optional] Name of the element of the componentCategory
— [required] Indicates the category of the custom property.Property
— [optional] Semantic UI property being described.Attribute
— [optional] Semantic characteristic of a property.State
— [optional] If necessary, the state of a custom property when used in the context of interaction design. E.g. hover, focus, selected
Now we will check what does this code mean
var(…)
This is a CSS function which we allow us to use the stored value of a custom CSS property. It accept two property one css custom property and one fallback.
–sds
Declaring a custom property requires that the name begins with double hyphens (--
). sds
is a namespace reserved for Salesforce’s design system.
-c
This identifier indicates that the custom property is a component-level customization. It is specific to the component it resides in and does not affect unrelated components.
-badge
badge
refers to the name of the component that is being targeted by the custom property. For example, we can use button, alert, card etc.
-color
There are several categories that classify naming conventions. In this instance, -color
identifies the category that this CSS custom property falls under.
-background
This is the semantic user interface property being customized. For example, other supported values are border, background color etc.
You can check Component Blueprint to identify which all components support styling hooks.
So now we will create a basic component in which we will overwrite CSS using styling hooks. We will overwrite different CSS property as a result we will totally change the look and feel.
Code Sample for Styling Hooks for Lightning Web Components
stylingHookDemo.html
<template>
<lightning-card title="Styling Hooks for Lightning Web Components" icon-name="action:fallback">
<lightning-avatar src="https://www.lightningdesignsystem.com/assets/images/avatar2.jpg" initials="TS" fallback-icon-name="standard:person_account" alternative-text="Tushar Sharma" class="avatar"></lightning-avatar>
<br/>
<lightning-badge label="Alpha" icon-name="standard:event" class="badge"></lightning-badge>
<br/>
<lightning-button label="Neutral" title="Non-primary action" class="slds-m-left_x-small button"></lightning-button>
</lightning-card>
</template>
stylingHookDemo.css
.avatar{
--sds-c-avatar-radius-border: 1rem;
--sds-c-avatar-text-color: rgb(111, 111, 128);
--sds-c-avatar-initials-text-color: rgb(111, 111, 128);
--sds-c-avatar-initials-text-color-hover: rgb(111, 111, 128);
}
.badge{
--sds-c-badge-color-background: rgb(223, 20, 20);
--sds-c-badge-color-border: rgb(223, 20, 20);
--sds-c-badge-sizing-border: 10px;
}
.button{
--sds-c-button-shadow:rgb(32, 204, 83);
--sds-c-button-shadow-focus:blue;
--sds-c-button-inverse-shadow-focus:rgb(148, 72, 114);
--sds-c-button-neutral-color-background:rgb(255, 123, 0);
--sds-c-button-neutral-color-border-hover:rgb(216, 119, 27);
}
So this is how our CSS customization will look like. In short, we can change all supported attribute using custom CSS attribute.
In conclusion, Salesforce Lightning Design System (SLDS) styling hooks for Lightning Web Components make easy to customize styling in supported way. So now we don’t need to worry about our future dom change which will overwrite our CSS customization.
Did you like the styling hooks, let me know how you are planning to use them in comments. Happy Programming 🙂
What if you need a different color of button on the same page ? Since css variables have single copy, I think you can’t do it.