使用 AddRazorRuntimeCompilation 时出现 CSS 隔离问题

Posted 2023-03-31

【中文标题】使用 AddRazorRuntimeCompilation 时出现 CSS 隔离问题

【英文标题】：Problem with CSS Isolation when I use AddRazorRuntimeCompilation

【发布时间】：2021-11-13 10:55:36

【问题描述】：

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

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

我该如何处理。

【参考方案1】：

你必须使用，::deep 例如

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

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

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

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