假設我在MyComponent.razor檔案中有以下元素：
<label class="form-label" for="myInput">Text Field</label>
<InputText class="form-control" id="myInput" @bind-Value="@Something"/>
如果我設定一個MyComponent.razor.css檔案，我可以定位標簽元素而不是 InputText。常規 HTML 輸入按預期作業。
label {
color: blue; /* This works */
}
/* Neither of the following works */
input {
background: red;
}
.form-control {
background: red;
}
#myInput {
background: red;
}
我設定了標簽樣式以查看是否存在快取問題，但看起來并非如此。
檢查元素，輸入欄位不使用為組件的 App.styles.css 類生成的相同哈希值（標簽和組件的其他元素使用b-rbinozve8m，當輸入似乎使用此 guid時_bl_9d02f742-2a91-4e7b-aede-108ae5da9f8a）。也許這是不匹配發生的地方，css 無法正確定位輸入欄位。
在 razor 檔案中使用行內樣式和標簽按預期作業，只有孤立的 .razor.css 檔案似乎很麻煩。
我的組件.razor
<!-- This is fine -->
<style>
.form-control {
background: red;
}
</style>
<!-- This is fine too -->
<InputText style="background: red;" class="form-control" id="myInput" @bind-Value="@Something"/>
看起來這是一個InputText轉換input問題，但我不確定這是預期的行為還是錯誤。在我的 razor 組件中使用樣式標簽很好，但我寧愿將它作為一個獨立的檔案來保持專案內的一致性。
uj5u.com熱心網友回復：
InputText是一個組件，因此它有自己的 css 隔離。如果要給子組件應用css，就需要使用::deep 偽元素。
檔案
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/537409.html
標籤：CSS网站开拓者