Почему стили из .css файла не применяются к компоненту Angular?

Question

[Александр]

Я пытаюсь воссоздать компонент app-part-slot из моего React проекта в Angular, но ни один из стилей из файла css не применяется к нему. Стили появляются внутри тега head, но браузер на них никак не реагирует.
Я создал этот компонент с помощью команды CLI и получил следующую файловую структуру:

part-slot
| part-slot.component.css
| part-slot.component.ts
...

Путь к css файлу был автоматически подставлен в декоратор Component. Я перепроверил, что этот путь действителен, IDE указывает на нужный файл, когда я нажимаю «Go to definition». Вот как выглядит декоратор:

@Component({
  selector: 'app-part-slot',
  standalone: true,
  imports: [],
  templateUrl: './part-slot.component.html',
  styleUrl: './part-slot.component.css'
})

Я пробовал заменить styleurl на styleurls в декораторе, не сработало. Я также попробовал импортировать этот css файл в styles.css, не совсем уверен, что это то, что нужно делать в моей ситуации, но это все равно это не помогло. Сам CSS код кажется корректным, по крайней мере, с React он работал нормально.

Версия Angular - 17.1.2. Если нужно заглянуть в какой-нибудь из файлов, то я их выложу.
Заранее спасибо за помощь.

Comments

[Михаил Р.]

тег css здесь не причем, это исключительно "особенности" angular

Answer 1

[Александр]

Проблема оказалась в разметке, которую я скопировал из React проекта, в частности в атрибуте className html элементов:
<div className='IconMountUpper'>
Angular вместо него использует атрибут class:
<div class='IconMountUpper'>