0

I have a simple lightning-vertical-navigation. I am trying to change the text color of the lightning-vertical-navigation-item but the css overide does not seems to works. Is there a way to do that?

mycomp.html

  ...<lightning-vertical-navigation selected-item={selectedItem} onselect={changeHandleAction}>
       <lightning-vertical-navigation-section>
           <template for:each={managedContents} for:item="cms">
               <lightning-vertical-navigation-item key={cms.managedContentId} label={cms.title}
                name={cms.managedContentId} > 
               </lightning-vertical-navigation-item>
           </template>
       </lightning-vertical-navigation-section>
  </lightning-vertical-navigation>...

mycomp.css

.slds-nav-vertical__action {
  color: purple !important;
}
2

It's a feature of LWC's Shadow DOM, which ensures both CSS and Element isolation.

CSS styles defined in a parent component don’t leak into a child

You're allowed to modify only what is defined in your component.
Since the element with slds-nav-vertical__action class is defined inside the lightning-vertical-navigation-item component you have no access and you cannot override its style.

If a component sets a css attribute using var() function, you can override it via Styling Hooks, but lightning-vertical-navigation-item doesn't provide such feature.

You could create your own vertical-navigation-item component from the blueprint in order to have full control on its styling.

3
  • Thanks, I do you have any example of vertical-navigation-item from blueprint that implementing the onClick function?
    – Raphael D
    Dec 6 '21 at 14:01
  • @RaphaelD no, I'm sorry, but a child component can communicate with its parent via event. In this documentation page there are few examples.
    – RubenDG
    Dec 7 '21 at 8:31
  • thanks, well that is maybe not the best option but I finally opted form aura component where I can easily override the css.
    – Raphael D
    Dec 7 '21 at 11:38
1

It is expected behaviour of css encapsulation due to the shadom's DOM. If you want to modify the standard slds css property either you can use styling hooks.

Since currently salesforce doesn't support styling hooks for lightning-vertical-navigation-section, The alternative approach you can go for is

  1. Create an external css file with your required css changes which doesn't support by salesforce currently and upload it as a static resource. Use that static resource in your lwc component. Please follow the link for reference.

  2. Create your own slds blueprint for lightning-vertical-navigation-item

Any one of the above can solve your requirement.

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.