1

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

5

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.

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.