Blazor 内置组件上的自定义 CSS

Posted 2023-03-27

【中文标题】Blazor 内置组件上的自定义 CSS

【英文标题】：Custom CSS on Blazor Built-In Component

【发布时间】：2021-12-30 01:06:14

【问题描述】：

每当我在像 InputText 这样的 blazor 内置组件上使用 css-class 或 css-id 时，css 不会被组件继承，或者组件只是覆盖它。 css 中的 !important 关键字也无济于事。请注意，我需要一个适用于内置组件的解决方案。

Index.razor：

...
<InputText @bind-Value="FormData.Imei" id="text-in"/>
...

Index.razor.css：

#text-in 
   color: fuchsia !important;
   border: none;

【参考方案1】：

InputText 是Index 的子组件。要将样式应用于子组件，您必须在 css 选择器之前添加 ::deep。更多详情here。这应该有效：

::deep #text-in 
   color: fuchsia !important;
   border: none;

在父组件中有一个根元素也很重要。组件的作用域标识符在组件被渲染时应用于根元素和其他元素。

来自文档的示例：

Parent.razor

<div>
    <h1>Parent component</h1>

    <Child />
</div>

Parent.razor.css

::deep h1  
    color: red;

Child.razor

<h1>Child Component</h1>

如果没有 Parent.razor 中的<div>，子组件中的<h1> 元素不会继承父组件的样式。

渲染的父组件和css选择器：

<div b-edlqfbffve="">
    <h1 b-edlqfbffve="">Parent component</h1>
    <h1>Child Component</h1>
</div>

/* /Shared/Parent.razor.rz.scp.css */
[b-edlqfbffve] h1 
    color: red;

如果没有 ::deep 组合器，css 看起来像这样：

/* /Shared/Parent.razor.rz.scp.css */
h1[b-edlqfbffve] 
    color: red;