Changing colors of lightning-button

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

It's true that styles defined in a component’s style sheet are scoped to the component and your CSS cannot reach into the child component of the lightning-button component.

However, you can get around this by defining styles in an external stylesheet, and loading that into your component. This way you can define CSS selectors without component-namespaces automatically being added. For example, you can simply say:

// CustomExternalStyles.css
.my-button > button {
    background-color: #14a6bc;
    color: #ffffff;
}

Then you can import this external stylesheet into your component like this:

// myComponent.js
// ...
import customStyles from '@salesforce/resourceUrl/CustomExternalStyles';
import { loadStyle } from 'lightning/platformResourceLoader';

export default class MyComponent extends LightningElement {

    connectedCallback() {
        loadStyle(this, customStyles);
    }
}

And finally you can use the .my-button class on a lightning button in your component where you're importing the external stylesheet:

// myComponent.html
<lightning-button class="my-button" label="My Button"></lightning-button>

And now the inner <button> element that gets generated will pick up the .my-button > button selector defined in the external stylesheet.