Overwrite singular panelbar component locally using SCSS

[Olivia]

Hi there, I'm hoping that someone might be able to help me - at present we are utilising the default kendo UI for angular in our project.

However, I need to try and overwrite one specific component (the panelbar header and its selected styles).

I do not want this overwrite to affect other UI elements of the same kind - at present I have a local component file, a HTML file with the panelbar within and a SCSS attached to affect its styling. However, no amount of targeting is letting me overwrite the styles of the panel bar.

Ideally I just need the background to be transparent and text to be grey.

local.HTML

<div class="panelbar-wrapper">
    <kendo-panelbar>
        <kendo-panelbar-item 
        title="Record Control & Reply Bits" [expanded]="true">
            <ng-template kendoPanelBarContent>

</ng-template>
</kendo-panelbar-item>
</kendo-panelbar>
</div>

local.SCSS File:

.k-panelbar .k-panelbar-item.k-panelbar-header.k-level-0 .k-link.k-selected{
        
         background-image: none !important;
         color: #303030 !important;
         background: transparent !important;
        
}
    .k-panelbar .k-panelbar-item.k-panelbar-header.k-level-0 .k-link{
        color: #303030 !important;
        
}    

Any help would be really appreciated. 

[Yanmario]

Hi Olivia,

Thank you for the provided details.

The selectors seem correct and if the styles aren't being applied then make sure that the ViewEncapsulation is set to none:

  encapsulation: ViewEncapsulation.None

Styling a specific component without overwriting the others can be done by placing a custom class and using that class in the selectors. Please check the following example demonstrating a specific PanelBar getting styles and the other stays with its default styling:

https://stackblitz.com/edit/sass-use-nrt2pg?file=src%2Fapp%2Fapp.component.html

The selectors were also shortened as the custom class helps in such cases.

I hope this helps.

Regards,
Yanmario
Progress Telerik

[Olivia]

Hi there, 

Thank you for the response - I didn't have ViewEncapsulation on but even after applying this and copying the custom name and styling example given in the example still doesn't seem to override the component styling so not entirely sure why that is still the case.

All the best,

Olivia

[Yanmario]

Hi Olivia,

In such a case, I am not entirely sure what could be the reason for the styles not being applied on your side. Could you send us a runnable application demonstrating the issue on your side? That will help me troubleshoot the application and provide further details on this matter. Thank you in advance for your cooperation.

In addition, if the application contains some private information it could be sent in a private support ticket by using a trial license as a starter.