0

I want to change the styling of several Lightning Component elements such as: Changing the background of navigation of Tabset from light grey to blue:

From thisStandard Tabset

To this The Tabset I want to do (I did that using inspect element)

The code I written in .cmp file:

<aura:component>
<div class="slds-size_1-of-4 slds-p-bottom_xx-large">
    <lightning:tabset variant="scoped" class="test">
        <lightning:tab label="Item One">
            <aura:set attribute="body">
                Hello World

            </aura:set>
        </lightning:tab>

        <lightning:tab label="Item two">
            <aura:set attribute="body">
                Bye World

            </aura:set>
        </lightning:tab>
    </lightning:tabset>
</div>

The code in .css file:

.THIS.test {
background-color: blue !important;

}

But it won't change, can anyone advise me please ?

Improve this question

4 Answers 4

Reset to default
2

You need to target the <ul> element that holds the tabs:

.THIS .test .slds-tabs_scoped__nav {
background-color: blue;
}
Improve this answer
2
  • Thank you, is there a way to do that using id ? and how ?
    – Mostafa Ali Mansour
    Dec 11, 2018 at 18:57
  • You can include an id but you still have to target the .slds-tabs_scoped__nav class. If you add an id of test to your outer div you could then do this: .THIS#test .slds-tabs_scoped__nav {background-color: blue;}
    – John Towers
    Dec 11, 2018 at 19:14
1

You can set the active element as 

.THIS ul > li.slds-tabs_scoped__item.slds-is-active > a {
   background-color: blue ;
}

Result:

enter image description here

You can use chrome inspect to see which selectors to use. Its easy and works magic. I use it every time

enter image description here

Improve this answer
2
  • 2
    Boo !important flag.
    – Adrian Larson ♦
    Dec 11, 2018 at 15:56
  • Thank you, is there a way to do that using id ? and how ?
    – Mostafa Ali Mansour
    Dec 11, 2018 at 18:57
0

You need a space between .THIS and .test. Without the space, you're selecting only the top element .THIS which must ALSO have class test. With the space you'll select child elements of .THIS. It's a subtle but critical difference.

.THIS.test  // element that matches BOTH '.THIS' AND '.test'  
.THIS .test // children of .THIS that match '.test'

I'm not 100% certain whether .THIS refers to your first div.slds-size_1-of-4 or some wrapper element around your component, but either way it doesn't find class='test' on that element, so there are no matches. And that's why it's not matching the child tabset element you're intending without the space in the CSS selector.

Improve this answer
2
  • Thank you, is there a way to do that using id ? and how ?
    – Mostafa Ali Mansour
    Dec 11, 2018 at 18:56
  • It works the same way with ID. If test was an id instead of a class then: .THIS #test
    – Dan Puza
    Dec 11, 2018 at 21:24
0

These solutions did not appear to work for lightning-tabset in lwc. Interestingly aura's tabset has a class attribute, while lwc tabset does not. What does that tell us about why the same CSS override solutions do not work for lwc today?

Borrowing from this solution this seems to work with lwc's tabset. It admittedly feels very hacky.

renderedCallback() {
    const style = document.createElement('style');
    style.innerText = `c-vertical .slds-vertical-tabs__nav {
        background-color: aliceblue;
    }`;
    this.template.querySelector('lightning-tabset').appendChild(style);   
}

lwc playground

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .