razor css 文件 - 不应用样式答案

【问题标题】：razor css file - styles are not appliedrazor css 文件 - 不应用样式
【发布时间】：2022-08-02 18:29:02
【问题描述】：

这是我的 formcommon.razor 的以下代码

<MudItem xs=\"12\" md=\"3\" Style=\"margin-top: 15px!important;margin-left: -70px!important;\">
                            <MudTooltip Text=\"some tooltip\">
                                <MudButton Variant=\"Variant.Filled\" Class=\"button-min-width\"  Color=\"Color.Primary\">?</MudButton>
                            </MudTooltip>
                        </MudItem>

这完美地工作，因为左边距是-70px。

但是当我将这些移动到 formcommon.razor.css 的 .css 文件时

.marginIn {
    margin-top: 15px!important;
    margin-left: -70px!important;
}

并将此 formcommon.razor 更改为

<MudItem xs=\"12\" md=\"3\" Class=\"marginIn\">
                            <MudTooltip Text=\"some tooltip\">
                                <MudButton Variant=\"Variant.Filled\" Class=\"button-min-width\"  Color=\"Color.Primary\">?</MudButton>
                            </MudTooltip>
                        </MudItem>

输出不同。左边距不是-70px。

我错过了什么吗？

你有没有：yourAppName.styles.css 链接在 index.html 中？它是否适用于“纯” html（不是 Muditem 组件）？

标签： razor blazor

【解决方案1】：

这是预期的行为。请注意，您没有通过普通的class 属性将任何类应用于您的组件。在MudItem 中，Class 是组件属性，而不是 HTML 属性。

一种解决方案是将MudItem 包装在div 容器中：

<div class="marginIn">
  <MudItem />
</div>

【讨论】：