Проблема со стилем в компонентах Blazor/Razor при использовании .razor.css ⇐ CSS

[Anonymous]

Я столкнулся с проблемой при попытке применить стили к компонентам Blazor/Razor, когда я перемещаю стили в отдельный файл CSS. В моем проекте я определяю стили в компоненте .razor, и при применении стилей непосредственно в этом файле стили правильно применяются к элементам HTML внутри этого компонента и его дочерних компонентов.
Однако когда я перемещаю стили в отдельный файл .razor.css и пытаюсь включить его в HTML, некоторые стили применяются к элементам HTML неправильно. В частности, цветовой стиль применяется правильно, а стиль границы — нет.
Может ли кто-нибудь помочь мне понять, почему это происходит и как я могу решить эту проблему?
Вот упрощенный пример кода:
Случай 1 (ОК)
В файле Test1.razor:

Код: Выделить всё

Test1 Title

В файле Home.razor:

Код: Выделить всё

Home



.aeae {
border: 1px solid red;
color: blue;
}

В результате текст «Заголовок теста 1» отображается синим цветом, а граница — красным (ОК).
Случай 2 ( ??)
В файле Home.razor:

Код: Выделить всё

Home


/* Removed  from Home.razor */
- 
-     .aeae {
-         border: 1px solid red;
-         color: blue;
-     }
- 

В файле Home.razor.css:

Код: Выделить всё

.aeae {
border: 1px solid red;
color: blue;
}

В результате текст «Заголовок Test1» отображается синим цветом, но красная рамка не применяется к элементам в Test1.razor.
Итак, очевидно, что файл Home.razor.css правильно включается в HTML и нет синтаксических ошибок. Однако я не могу понять, почему цветовой стиль применяется правильно, а стиль границы — нет.

Подробнее здесь: https://stackoverflow.com/questions/784 ... -razor-css