Example: I understand we can achieve by using slds button base component but any other way directly to achieve through lwc.
<lightning-button label="Neutral" title="My Title" disabled class="myClass"></lightning-button>
-
can you add the content of your CSS class myClass?– Ranjit MishraSep 16, 2021 at 16:00
Add a comment
|
1 Answer
In lwc documentation you can find this statement about css hooks.
Use SLDS styling hooks to customize the component's styles. For example, specify the background color on the button with brand variant using the --sds-c-button-brand-color-background custom property.
Sample snippet:
.myClass {
--sds-c-button-brand-color-background-disabled: purple;
}
In your browser, if you would inspect the button, you could find the right css variable.
-
That would work for normal buttons background color change but he wants to change the color for a disabled button. So your code snippet would change the color if the button is not disabled not in disabled case. Sep 16, 2021 at 16:56
-
with the disabled it works the same, i updated my answer to show that– DamecekSep 16, 2021 at 17:24
-
1important to use the right hook - in your example it only works for a brand button (ex.
lightning button variant="brand") which OP doesn't seem to be using. Default, if you don't set a variant, isneutralsobutton-neutral-color-background-disabled. See example. Sep 16, 2021 at 18:07 -
Cool, much appreciated but do these styling hooks work in production and is it safe to use them? Sep 17, 2021 at 4:20
-
it has been provided by salesforce developer.salesforce.com/docs/component-library/documentation/… , so it's very much safe to use. Sep 17, 2021 at 6:07