使用 Blazor 进行 css 隔离 - css 不会改变我的 .razor答案

【问题标题】：css isolation with Blazor - css doesn't change my .razor使用 Blazor 进行 css 隔离 - css 不会改变我的 .razor
【发布时间】：2021-05-01 12:57:55
【问题描述】：

在 projectname.Client 中，我创建了一个文件夹 foldername。

在该文件夹中，我创建了一个剃须刀文件razorfile.razor。我还创建了一个 .css 文件razorfile.razor.css。在我的 solutionexplorer 中，我可以展开 razorfile.razor 并在其中看到 razorfile.css.razor。

在我的剃刀文件中，我写了这个：

@page "/example"

<div>
    <div>
        <h1>Title</h1>
    </div>
    <div>
        <section class="content">
            <div>
                <h1>Title</h1>
            </div>
        </section>
    </div>
</div>

@code {
}

（对不起所有div-tags。我读到它应该有助于.css）

我的 .css 文件如下所示：

::deep h1 {
    color:brown;
}

h1 {
    color: brown;
}

我的问题是h1 中的文本不是棕色的。如何使用 .css 来获取该剃须刀组件？

【问题讨论】：

标签： html css razor blazor

【解决方案1】：

您需要手动将此链接标签添加到head标签中的主机页面（使用您的项目名称）。 Blazor 不会自动执行此操作。还要确保您的项目在 net 5 上。

<link href="MyProjectName.styles.css" rel="stylesheet">

更多关于主题here

【讨论】：

【解决方案2】：

在 wwwroot 文件夹中添加一个 CSS 文件，并在 index.html 中添加它的引用

【讨论】：