使用 AddRazorRuntimeCompilation 时出现 CSS 隔离问题

Question

我使用 CSS 隔离，但是当我使用 builder.Services.AddRazorPages().AddRazorRuntimeCompilation(); CSS 隔离时不起作用。

<link rel="stylesheet" href="~/WebApplication1.styles.css" asp-append-version="true" />

将加载所有样式，但无法加载我的元素。

h1[b-2uayqwgjuo]{
    color:red;
}
/* _content/WebApplication1/Pages/Privacy.cshtml.rz.scp.css */
h1[b-5u69ocmej3]{
    color:blue;
}

我该如何处理。

Answer 1

你必须使用，::deep 例如

<div>
    <input id="first-name-input" type="text" />
</div>

如果您想将样式设置为 first-name-input，您必须这样做：

::deep #first-name-input {
    background: red;
}

总结：如果任何元素没有像5u69ocmej3这样的随机元素，你必须为上面的代码设置样式。

Problem with CSS Isolation when I use AddRazorRuntimeCompilation