0

I need to change the color of button based on condition ,my button label is changing but not color below is snippet. adobeButton.label = 'Not Elligible'; is working but color and border dont chnage and not working

<table class ="tabestye" >
   <tr>
      <th scope="col">Name</th>
      <th scope="col">Phone</th>
      <th scope="col">Add to Database</th>
      <th scope="col">Fetch Eligibility</th>
   </tr>
   <template for:each={optionsFieldsKeyValuePairFlow} for:item='item' for:index="index">
      <tr key={item.key} id={item.key}>
         <td class="row-data">{item.key}</td>
         <td class="row-data">{item.value}</td>
         <td><lightning-button variant="brand" label="Add to Database" data-index={index} onclick={SaveToSalesforce}></lightning-button></td>
         <td><lightning-button data-id="fetch" variant="brand" data-index={index}  label="Show Eligibility" onclick={fetchEligibility}></lightning-Button></td>
      </tr>
   </template>
</table>`

fetchCustomer({Name:rowData.key,Phone:rowData.value}).then(result=>{
   if(result<21) {
      console.log(result);
      //this.template.querySelector(".fetch").classList.add("clicked");
      let adobeButton = this.template.querySelector('[data-id="fetch"]');
      console.log(adobeButton);
      this.template.querySelector('[data-id="fetch"]').style.color='red';
      this.template.querySelector('[data-id="fetch"]').style.background='red';// both i tried
      this.template.querySelector('[data-id="fetch"]').style.border='yellow';
      adobeButton.label = 'Not Elligible';

3 Answers 3

1

Like all lightning components, you cannot mess with the styling of the component's internals in this way because their content is protected within a Shadow DOM. You have to use the features provided, either using the supported properties or Styling Hooks.

If you read the documentation you will find a list of the styling hooks available for lightning-button.

These are specific to certain variants, so make sure to combine them appropriately.

1

Lightning Web Components currently enforces shadow DOM on every component, encapsulating a component’s internal markup and making it inaccessible to CSS, HTML or JS. More about this here: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_dom

Possible ways to change the styling of the base component:

Check component documentation, look for available attributes that you can help change its appearance. https://developer.salesforce.com/docs/component-library/bundle/lightning-button/documentation look, we have a variant attribute with a limited set of possible values, for example:
destructive is a red button used to warn users that its action has a negative effect. destructive-text is similar to destructive but only the label and border are red.

Given SLDS guidelines it's good to stick with standard variants providing consistent look familiar to the user across the whole application.

Yes, component's interface provides limited number of options and sometimes it's not enough to get required result. In this case you can use SLDS styling hooks using custom CSS properties. More about this here with examples: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_css_custom_properties
Full list of available style hooks for lightning button is available on SLDS https://www.lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview

And if there isn't a style hook to change particular style property you can think of creating your own component using SLDS component blueprints. Also you can check Light Dom option, I haven't investigated but have seen that base components style can be easily updated in this mode. More on this here: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_light_dom

0

as Serge and Phill W mentioned, you cannot manipulate the internal styling of a base component. The elegant way to do is to use styling hooks. Here is a small example to start with. On click of Purple and Green button the first button gets the corresponding color.

CSS

.purple {
    --slds-c-button-brand-color-background: #9050e9;
    --slds-c-button-brand-color-background-hover: #5a1ba9;
    --slds-c-button-brand-color-border: #9050e9; 
    --slds-c-button-brand-color-border-hover: #5a1ba9;
    --slds-c-button-brand-text-color: #ffffff; 
}
.green {
    --slds-c-button-brand-color-background: #2e844a;
    --slds-c-button-brand-color-background-hover: #194e31;
    --slds-c-button-brand-color-border: #2e844a; 
    --slds-c-button-brand-color-border-hover: #194e31;
    --slds-c-button-brand-text-color: #ffffff; 
}

HTML

<template>
    <lightning-card>
        <div class="slds-m-top_small slds-m-bottom_medium slds-m-left_x-small">
            <lightning-button variant="brand" label="Click!" class={buttonClassName}></lightning-button>
        </div>
        <div class="slds-m-top_small slds-m-bottom_medium slds-m-left_x-small">
            <lightning-button label="Purple" data-name="purple" onclick={handleClick}></lightning-button>
            <lightning-button label="Green" data-name="green" onclick={handleClick}></lightning-button>
        </div>
    </lightning-card>
</template>

JS

import { LightningElement } from 'lwc';
export default class ChangeButtonColor extends LightningElement {
    buttonName = "";
    get buttonClassName(){
        return this.buttonName;
    }
    handleClick(e) {
        let bName = e.target.dataset.name;
        this.buttonName = bName;
    }
}

Screen Demo

enter image description here

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.