[SalesForce] Lightning Component: Css class for uiOutputText

I'd like to figure out why my component's CSS is not applied. I have a very simple
ui:outputtext:

<ui:outputtext value="My Text" class="boldtext" />

And the following CSS:

.THIS .boldtext {
    font-weight: bold; 
}

The ui:outputtext renders to:

<span class="uiOutputText cMyComponent boldtext" dir="ltr" data-aura-rendered-by="108:1;0" data-aura-class="uiOutputText cMyComponent ">My Text</span>

But unfortunately, component's text is not bold and I didn't see my component's CSS defined anywhere. Did I miss anything important?

P.S.: My component is related to the object:

 implements="flexipage:availableForAllPageTypes,force:hasRecordId"

Does that matter?

Best Answer

1.When you do not leave space between THIS and class Name denotes its top level element .This should work for you

.THIS.boldtext {
 font-weight: bold; 
}

2.When you leave space between THIS and class Name denotes its decendent or nested element has its style . 

.THIS .boldtext {
   font-weight: bold; 
}

In your case its toplevel element so do not leave the space .

Related Topic