blazor 中的 CSS 隔離不適用於預定義的表單元素

Question

我有一個頁面，foo.razor，它代表一個表單：

<EditForm Model=SomeModel>
    <InputText @bind-Value=SomeModel.Property1 />
    <InputText @bind-Value=SomeModel.Property2 />
    <p>a paragraph</p>
</EditForm>

在它旁邊我有一個孤立的 CSS, foo.razor.css，例如：

input{
  display: block;
}
p{
  color: lime;
}

段落的樣式正確應用，但輸入元素的樣式不正確。 我不明白為什么。

另外，我知道 blazor 在編譯后會為元素生成隨機 id。 在瀏覽器中，我可以看到該段落具有這樣的 id，但輸入和表單元素也沒有。

我嘗試為組件添加 class 名稱並使用深度選擇器，如下所示：

::deep .classname {
  .......
}

但這也不起作用。

Answer 1

CSS 隔離的棘手之處在於它僅適用於普通的 HTML 節點，不適用於組件。 在幕后，定義隔離 CSS 的當前組件中的元素獲得自定義（某種隨機）屬性，並且 CSS 規則級聯通過該屬性以將范圍限定為當前組件。 框架不知道其他組件內部是什么，因此它無法向它們添加該屬性-它們的呈現是它們自己的。 因此，這些范圍內的 CSS 規則不能針對組件。

如何解決這個問題 - 將您的組件包裝在當前組件的 HTML 元素中，並通過用::deep替換該元素來編寫規則以定位該容器內的元素。

這是一個例子：

input,
::deep input{
    display: block;
    border: 2px solid red;
}

p,
::deep p {
    color: lime;
    border: 2px solid red;
}

這是修改表單的方法

<EditForm Model=SomeModel>
    <div> @* This div right here is the "magic" *@
        <InputText @bind-Value=SomeModel.Property1 />
        <InputText @bind-Value=SomeModel.Property2 />
        <p>a paragraph</p>
    </div>
</EditForm>

@code{
    TestModel SomeModel { get; set; } = new TestModel();
    public class TestModel
    {
        public string Property1 { get; set; }
        public string Property2 { get; set; }
    }
}

Answer 2

@rdmptn 的答案是正確的，但無論如何我都會加兩分錢。 我掙扎了很長時間才能理解並獲得::deep工作，我將分享我的旅程。

想象一下，我們想要覆蓋子組件中<p>標記的顏色：

MyComponent.razor.css

::deep p { color: red !important; }

MyComponent.razor：

<span>My component!</span>
<OtherComponent/>

其他組件。razor：

<p>Other component!</p>

現在，為MyComponent.razor生成的 HTML 看起來像：

<span random1="">My component!</span>
<p random2="">Other component!</p>

Every.razor 組件有一個隨機的、唯一的組件 ID，它被分配給它的所有普通 HTML標記，即<div> 、 <p> 、 <span> 、 <img>等。注意MyComponent中的<span>元素如何被標記為random1 。 同樣， <p>元素被標記為random2因為該元素是在OtherComponent中定義的。

但是從MyComponent.razor.ZC7A62 8CBA22E28EB17B5F5C6AE2A266AZ 生成的 CSS 看起來像：

[random1] p { color: red !important; }

也就是說， ::deep CSS 選擇器變成類似於“在帶有標簽random1的元素下的所有<p>類型的元素”。 從上面生成的 HTML 可以看出，這與OtherComponent中的<p>不匹配。 這就是為什么將內容包裝在<div>中的原因：

MyComponent.razor （更新）

<span>My Component!</span>
<div>
    <OtherComponent/>
</div>

以及新生成的 HTML：

<span random1="">My Component!</span>
<div random1="">
  <p random2="">Other component!</p>
</div>

現在::deep CSS 選擇器將匹配OtherComponent中的<p>標簽。