cssblazorblazorise

Override a class in Blazorise Accordion

I have a Blazorise Accordion to display a message which works just fine, but I can't seem to override the css padding that is the default for the 'CollapseBody' element.

                <Accordion>
                    <Collapse Visible="message.UIFlag">
                        <CollapseHeader>
                            <div class="listitem" @onclick="() => toggleMessageUI(message)">
                                <div class="item from">@message.From.FullName</div>
                                <div class="item to">
                                    @MessageRecipientNames
                                </div>
                                <div class="item subject">@message.Subject</div>
                                <div class="item sent">@message.SentDateTime</div>
                            </div>
                        </CollapseHeader>
                        <CollapseBody class="colbody">
                            <div class="listmsg">
                                @message.MessageText
                            </div>
                        </CollapseBody>
                    </Collapse>
                </Accordion>

I have set up the pages css to some settings just to shopw the effect. The 'listmsg' class works fine, but is constrained by the accordion-body class's padding which I want to override.

heres the current state of the classes:

.listmsg {
   width:100% !important;
   background-color: darksalmon !important;
   border-bottom: 2px solid black !important;
   padding: 0 0 0 0 !important;
}

.colbody {
   background-color: yellow !important;
   padding: 0 0 0 0 !important;
 }

.accordion-body {
   padding :0 !important;
}

Salmon Pink area shows extent of the message The chrome debugger shows the elements: enter image description here

Here is the default value I wish to override: enter image description here

I know that css is an area that I am not massively proficient in, being more of a programmer. However, I'd have thought that putting the 'accordion-body' in the class would override it.

Any ideas? Cheers

EDIT I have modified the load order in the index.html to how it is below:

<!-- BLAZORISE head section -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
<link href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css" rel="stylesheet" />
<link href="_content/Blazorise.Snackbar/blazorise.snackbar.css" rel="stylesheet" />
<link href="_content/Blazorise.SpinKit/blazorise.spinkit.css" rel="stylesheet" />
<!-- END OF BLAZORISE head section -->

<link href="Player.Client.styles.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
Solution

  • You have to add your css file after Blazorise css file:

    <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />

    Also make sure to clear browser cache so that it loads the latest css file and not an older one from cache.

    Edit: You probably added the .accordion-body class inside isolated css file. Try to add it into the app.css file.

    The problem is that CSS isolation is a compile-time process, so while Blazor is compiling it will apply unique IDs on an element and link it with CSS. This process works only with regular HTML elements.

    For components, it cannot know where to place that ID and so it will not work. This is Blazor limitation.