Изолированные файлы CSS не работают для ввода EditForm

Допустим, у меня есть следующие элементы в файле 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 кажется проблематичным.

MyComponent.razor

<!-- 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, но я не уверен, что это ожидаемое поведение или ошибка. Использование тегов стиля в моем компоненте бритвы — это нормально, но я бы предпочел, чтобы он был изолированным файлом, чтобы обеспечить согласованность в проекте.

Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Анимация SVG-узоров без единой строки CSS
Анимация SVG-узоров без единой строки CSS
Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
8 репозиториев GitHub, о которых должен знать каждый веб-разработчик
8 репозиториев GitHub, о которых должен знать каждый веб-разработчик
Здесь представлена дополнительная информация о восьми репозиториях GitHub, о которых должен знать каждый веб-разработчик:
Как создать модальное окно с помощью CSS и JS
Как создать модальное окно с помощью CSS и JS
В этой статье мы создадим модальное окно на чистом JavaScript.
0
0
71
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

InputText является компонентом, поэтому он имеет собственную изоляцию CSS. Если вы хотите применить CSS к дочерним компонентам, вам нужно использовать псевдоэлемент ::deep.

Документы

Другие вопросы по теме