Допустим, у меня есть следующие элементы в файле MyComponent.razor
:
<label class = "form-label" for = "myInput">Text Field</label>
<InputText class = "form-control" id = "myInput" @bind-Value = "@Something"/>
Если я настрою файл MyComponent.razor.css
, я смогу настроить таргетинг на элемент label, но не на 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 кажется проблематичным.
<!-- 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
, но я не уверен, что это ожидаемое поведение или ошибка. Использование тегов стиля в моем компоненте бритвы — это нормально, но я бы предпочел, чтобы он был изолированным файлом, чтобы обеспечить согласованность в проекте.
InputText
является компонентом, поэтому он имеет собственную изоляцию CSS. Если вы хотите применить CSS к дочерним компонентам, вам нужно использовать псевдоэлемент ::deep
.