英文:
How to add razor isolated/code behind CSS classes in MudBlazor components?
问题
在我的代码后台文件中，我已经定义了一个CSS类。当我在普通的HTML元素上使用"class"属性时（例如：），它会被引用。然而，如果这个类位于一个MudElement（"Class"）上，样式就不会生效。类名被设置了，但样式没有应用。
问题是什么？
MainLayout.razor:
<MudContainer Class="redBorder">
<span class="redBorder">
@Body
</span>
</MudContainer>
MainLayout.razor.css:
.redBorder {
border: 1px solid red;
}
英文:
in my codebehind file I have defined a css class. This is pulled when I use the "class" attribute on normal HTML elements (in the example: <span>). However, if the class sits on a MudElement ("Class"), the change is not pulled. The class name is set, but the style is not applied.
What's the problem?
MainLayout.razor:
<MudContainer Class="redBorder">
<span class="redBorder">
@Body
</span>
</MudContainer>
MainLayout.razor.css:
.redBorder {
border: 1px solid red;
}
答案1
得分: 1
不适用于剃刀隔离的 CSS，剃刀隔离/代码背后的 CSS 在编译时为每个类添加了一个 ID，链接似乎不起作用。
您可以创建一个单独的 CSS 文件并将其保存在您的 wwwroot/css 文件夹中（不要忘记在您的 index.html 文件中添加一个链接到该文件的链接）。然后，那里的类可以应用于 MudBlazor 组件的 Class 属性之上。
英文:
Doesn't work with razor isolated css, the razor isolated/code behind css adds an id to each class when compiled and linking doesn't seem to work.
You can create a separate css file and save it in your wwwroot/css folder (don't forget to add a link to that file in your index.html file.) Then the classes there can be applied on top of the MudBlazor components Class property.
答案2
得分: 0
如果没有误解您的问题，可以这样做：
<div>
<MudContainer Class="redBorder">
<span class="redBorder">
@Body
</span>
</MudContainer>
</div>
::deep .redBorder {
border: 1px solid red;
}
如果您想要一个CSS后台文件，您需要在HTML中使用::deep来让其生效。这仅适用于后台代码。
否则，您可以查看您的 _Host.cshtml 或 index.cshtml（取决于项目），CSS文件的顺序在这里很重要。
英文:
Might have misinterpreted your question. If not, it should be possbile like this:
<div>
<MudContainer Class="redBorder">
<span class="redBorder">
@Body
</span>
</MudContainer>
</div>
::deep .redBorder {
border: 1px solid red;
}
If you want to have a CSS code behind file, you need to use ::deep for the HTML to understand. Only counts for code behind.
Otherwise, you can check out your _Host.cshtml or index.cshtml (depend on project). The order of CSS files is important here.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论