[SalesForce] CSS in lightning component

I have below code 

<aura:component implements="force:appHostable" controller="controller" access="global" >
<aura:attribute name="allLoaded" type="Boolean" default="true"/>
  <aura:renderif isTrue='{!v.allLoaded}'>
    <div aura:id="xcont" class="slds-button slds-checkbox--button background-silver text-color-white">
      <label class="answears slds-checkbox--button__label">
      <ui:inputCheckbox aura:id="x" label="label" click={!c.voidJS}" class="text-color-white" />
    </label>
    </div>
  </aura:renderif>
</aura:component>

and I trying set text color to white or black with css but this is not working.

My css:

.THIS .background-silver {
        background: linear-gradient(to bottom, #FAFAFA 0%, #EEEEEE 100%);
        color: white;
    }
.THIS .text-color-white {
       color: #FFFFFF !important;
    }

Best Answer

Basically the issue in your case is you have a label where you are specifying a class to add background color white but if you inspect the dom using developer tools ui:inputCheckbox is again generating another label and for that your class cannot be set since its generated by aura. To overcome that you have to wrap your ui:input check box in a div like below

<div class="setcolorwhite">
  <ui:inputCheckbox aura:id="x" label="label" click="{!c.voidJS}" class="text-color-white"/>
</div>

and in css please add the below

.THIS .setcolorwhite .uiLabel {
   color: #FFFFFF;
}

We are using CSS specificity to set color to label and to ensure only this label reflects this styling we are adding a class to the parent container(setcolorwhite). Hope this helps!

Related Topic