4

How can I change the colors of lightning-button?

I tried doing this in my css:

.my-button {
    background-color: #14a6bc;
    color: #ffffff;
}

and applying that class to my <lightning-button> and removing the variant but I still get the base colors? I am trying to use these examples:

https://developer.salesforce.com/docs/component-library/bundle/lightning-button/example

1
8

Based on my understanding of the documentation, your CSS cannot reach into the child component of the lightning-button component:

Styles defined in a component’s style sheet are scoped to the component. This rule allows a component to be reused in different contexts without losing its style. It also prevents a component’s styles from overriding styles in other parts of a page.

The trailhead module Lightning Web Components for Aura Developers further expands on the concept.

CSS Encapsulation with Shadow DOM

Lightning web components use a web-standard mechanism called shadow DOM that hides the elements inside the component from the page that contains the component. Because Lightning web components have a shadow DOM, styles defined in a component’s style sheet are scoped to the component. They don’t apply to parent, child, or sibling components. This rule is strict, but it allows a component to be reused in different contexts without losing its styling. It also prevents a component’s styles from overriding styles in other parts of a page.

However, As of Winter '21, you can use styling hooks

4

Winter '21 introduces Styling Hooks (beta). Salesforce Lightning Design System (SLDS) styling hooks make it easy to customize component styling and express your brand. Styling hooks provide CSS custom properties that correspond to SLDS component blueprints and design variations. To customize an SLDS style, declare a corresponding custom property in a component’s style sheet. You can use the custom properties to style base components and custom components.

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_css_custom_properties

0

This is possible, either by loading CSS using loadStyle or using a hacky workaround. Check the blog post to know more about these approaches in detail:

https://hellosnl.blogspot.com/2019/07/lwc-override-css-of-standard-lightning-components.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.