重写Blazorise手风琴中的类

Question

我有一个Blazorise手风琴来显示一条工作正常的消息，但是我似乎不能覆盖css填充，这是'CollapseBody‘元素的默认设置。

                <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>

我已经设置了一些设置的网页css只是为了缩小效果。“listmsg”类工作正常，但受手风琴-body类的填充(我想重写它)的约束。

以下是类的当前状态：

.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;
}

​

chrome调试器显示了以下元素：

​

下面是我希望重写的默认值：

​

我知道css是一个我不太精通的领域，我更像一个程序员。然而，我原以为把“手风琴身”放到课堂上会推翻它。

有什么想法吗？干杯

编辑我修改了index.html中的加载顺序，如下所示：

<!-- 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" />

Answer 1

您必须在Blazorise css文件之后添加css文件：

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

还要确保清除浏览器缓存，以便从缓存中加载最新的css文件，而不是旧的css文件。

编辑：--您可能在孤立的css文件中添加了.accordion-body类。尝试将其添加到app.css文件中。

问题是CSS隔离是一个编译时的过程，所以在Blazor编译时，它将在元素上应用唯一的it，并将其与CSS链接。此过程仅适用于常规HTML元素。

对于组件，它不知道在哪里放置该ID，因此它将无法工作。这是巴兹尔的限制。