Blazor 内置组件上的自定义 CSS

Question

每当我在像 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;
}

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