Changeing Accordian Styling

Radzen.Blazor Components
1

I am trying to change the background color of Accordian Content div, but nothing I've tried works. I need to chnage this only on one page, so using CSS Isolation.

I've tried:

.rz-accordion ::deep .rz-accordion-content-wrapper {

.rz-accordion ::deep .rz-accordion-content {

.rz-accordion + .rz-accordion-content-wrapper + .rz-accordion-content-wrapper + .rz-accordion-content {

2

Hi @ll1325_ATT,

In case you need to change the background of a particular item only, you can use:

<RadzenAccordionItem class="my-item" ... >

<style>
    .my-item + .rz-accordion-content-wrapper {
        --rz-accordion-item-background-color: red;
    }
</style>

To change the background of all items try this:

<style>
    .rz-accordion-content-wrapper {
        --rz-accordion-item-background-color: red;
    }
</style>
3

Yes, again, this is for one page only using CSS Isolation. If I add the style to site.css, it works, but then it overrides all pages. CSS Isolation does not appear to be working on RADZEN controls.

4

@ll1325_ATT with all due respect, I have to disagree.

You can always add a CSS class and scope the styles to a particular component or page:

<RadzenAccordion class="my-accordion">

And then in site.css:

.my-accordion .rz-accordion-content-wrapper {
    --rz-accordion-item-background-color: red;
}
5

You should check the official documentation: ASP.NET Core Blazor CSS isolation - the section about child components and the ::deep selector.