[SalesForce] CSS applied to the elements in lightning components

html element in component : sample.cmp

<div class="slds-text-heading--large heading">
    Activity Dashboard
</div>

sample.css

.THIS .heading{
    padding: 1rem;
    border-bottom: 2px solid #d2522a;
    position: fixed;
    width: 100%;
    z-index: 1000;
    background: #f9f9f9;
}

I have include this component in a lightning app. The problem is, above css is not applied to the div with class 'heading'. Also, it is not shown in Google chrome console styles. I had to add inline style to the div to make it work.
But I cannot add inline css to every element because this is happening with other elements too.
Am I missing something?

Best Answer

<div class="slds-text-heading--large heading">
    Activity Dashboard
</div>

if your div is top level element then you have to use

.THIS.heading

in your stylesheet. salesforce documentation

Related Solutions

[SalesForce] Lightning, css and communities

You'll have to use increased CSS Specificity in how you write your style sheet. While you can dive deep into specificity by looking into a specificity chart, the short explanation is that you'll need more selectors to identify things and then you won't need to use !important. For example, instead of this:

.myStyle { 
    background-color: #eee; 
}

do this:

#containerName .classInsideCont div .myStyle {        
    background-color: #eee; 
}

The second example has more CSS selectors and therefor overrides the first.

This image below from the style sheet in the inspector of a community page shows that this element has 4 selectors on it. You would therefore need to either use a specificity from the chart above that overrides this or the shorthand is to just use more selectors (i.e. 5) than this to override it.

[SalesForce] How to apply css to Lightning:overlayLibrary

Modals in lightning:OverlayLibrary inherits styling from SLDS modal.

There are some standard classes you can use to adjust the width before moving with some custom CSS, like .slds-modal_large or .slds-modal_medium.

Example:

component.find('overlayLib').showCustomModal({
    cssClass: "mymodal slds-modal_large",
    // setting other properties
})

Best Answer

Related Solutions

[SalesForce] Lightning, css and communities

[SalesForce] How to apply css to Lightning:overlayLibrary

Related Topic