Overriding standard lightning web component css by styling hooks

We can override standard lightning web components like button, icon css by styling hooks. it uses css custom properties for easy customise especially when working with web components and shadow DOM.This styling hooks lwc would be more useful in customising the css properties of a component internals from outside in shadow DOM.

 Release update : In Spring ’21 release, styling hooks are introduced as a beta feature.

Example:-

let’s say we have a lightning-button defined in our template,

<lightning-button variant="brand-outline" label="Generate PDF" class="outlinebrand"/>
To change its button text color and button border color we have to create a custom css class called  “outlinebrand”  as shown below,
.outlinebrand {

--sds-c-button-text-color: black;

--sds-c-button-outline-brand-color-border: black;

}

CSS CUSTOM PROPERTY :-
we have to use css custom properties for buttons work only with particular lightning-button variants.

Custom properties for buttons work only with particular lightning-button variants.

CSS CUSTOM PROPERTY LIGHTNING-BUTTON VARIANTS
--sds-c-button-* all
--sds-c-button-color-* base
--sds-c-button-text-color-* neutral (default), base, and brand-outline
--sds-c-button-neutral-* neutral (default)
--sds-c-button-brand-* brand
--sds-c-button-outline-brand-* brand-outline
--sds-c-button-destructive-* destructive
--sds-c-button-text-destructive-* destructive-text
--sds-c-button-inverse-* inverse
--sds-c-button-success-* success

See Styling Hooks Overview for a list of CSS custom properties.

For more information, see Style Components Using Lightning Design System Styling Hooks in the Lightning Web Components Developer Guide.

Be the first to comment

Leave a Reply

Your email address will not be published.


*