html element in component : sample.cmp

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


.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?

  • 1
    did you tried .THIS.heading{ your css } – Manjot Singh Feb 6 '17 at 14:25
<div class="slds-text-heading--large heading">
    Activity Dashboard

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


in your stylesheet. salesforce documentation

| improve this answer | |
  • I used .THIS .heading but it is not working. – nilesh_ramteke Feb 7 '17 at 5:41
  • I made a mistake here. I did not notice that there is no space in .THIS.heading. This solution works. Thanks @Manjot Singh – nilesh_ramteke Feb 7 '17 at 5:53

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.