使用css隔离更改InputText的样式

Question

我是 blazor 新手，我正在尝试使用

InputText

更改

css isolation

的风格。

如果我内联或内部设置样式，则可以更改样式，但当我尝试使用 css 隔离设置它时，它不起作用。我查看了 docs 并指出

作用域 CSS 仅适用于 HTML 元素，不适用于 Razor 组件 或标记帮助程序，包括应用了标记帮助程序的元素，例如 < input asp-for="..."> /.

InputText 是 Razor 组件吗？这就是我无法使用 css 隔离更改样式的原因吗？ 希望获得有关此问题的任何建议！

Answer 1

首先，InputText肯定是一个剃刀组件，它是内置的输入组件之一。因此，CSS 隔离在 InputText 中不起作用应该是预期的行为。同时，我们在文档中有以下解释来解释为什么我们在InputText中使用内联样式可以成功更改样式。

所有的输入组件，包括EditForm，都支持任意 属性。任何与组件参数不匹配的属性都是 添加到渲染的 HTML 元素中。

作为解决方法，我们可以将类定义放入 wwwroot->css->site.css 中，或者将

<style> .input-text-r { color: blue; } </style>

放入 razor 组件中，或者使用内联样式（如果不违反您的 CSP 策略）。