Изменение стиля InputText с использованием изоляции CSS
Я новичок в blazor и пытаюсь изменить стиль InputText, используя css isolation.
Стиль можно изменить, если я установлю его встроенным или внутренним, но он не работает, когда я пытаюсь установить его с использованием изоляции CSS. Я просмотрел документы и там сказано, что
CSS с областью действия применяется только к элементам HTML, а не к компонентам Razor. или вспомогательные функции тегов, включая элементы с примененными вспомогательными функциями тегов, например <input asp-for="...">/.
Является ли InputText компонентом Razor, и именно поэтому я не могу изменить стиль с помощью изоляции CSS? Хотелось бы получить какой-нибудь совет по этому поводу!
Ответы 1
Прежде всего, InputText определенно должен быть компонентом бритвы, это один из встроенных компонентов ввода. Так что изоляция CSS не работает в InputText, это должно быть ожидаемым поведением. Между тем, в документе ниже приведено объяснение того, почему мы используем встроенный стиль в InputText и можем успешно изменить стиль.
Все компоненты ввода, включая EditForm, поддерживают произвольные атрибуты. Любой атрибут, который не соответствует параметру компонента, является добавляется к отображаемому элементу HTML.
В качестве обходного пути мы можем поместить определение класса в wwwroot->css->site.css или <style> .input-text-r { color: blue; } </style> в компонент Razor или использовать встроенный стиль, если это не противоречит вашей политике CSP. Или добавьте класс динамически после отображения страницы, если это необходимо в некоторых конкретных сценариях, используя коды, подобные приведенным ниже.
<InputText class=@classvalue @bind-Value = "starship.Identifier" />
protected override async Task OnInitializedAsync()
{
classvalue = "input-text-r";
}