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 ?

2

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

.THIS .test .slds-tabs_scoped__nav {
background-color: blue;
}
| improve this answer | |
  • Thank you, is there a way to do that using id ? and how ? – Mostafa Ali Mansour Dec 11 '18 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 '18 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 | |
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 | |
  • Thank you, is there a way to do that using id ? and how ? – Mostafa Ali Mansour Dec 11 '18 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 '18 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 | |

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.