单独.css文件中的样式不适用于Angular 元件

try 使用style Urls，如下所示:

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

在您的代码片段中，您还遗漏了用于关闭css文件路径的‘.

如果您使用的是VScode，请判断是否有任何要求重新加载的扩展，这可能会导致误报.

也try 重新启动Angular 编译器，因为有时这3个变量中的一个变量可能会卡住，您的环境不干净.

UPDATE:个

根据您提供的playground ，问题不在于css，而在于在HTML元素上设置的类名称属性.ANGLE适用于普通类.举个例子:

react 代码:

<div className="CssAmazingClass">text</div>

Angular 等效码:

<div class="CssAmazingClass">text</div>

你也有不同的方式来设置css类，我建议看看this link，其中也解释了ngClass指令，并给你一个关于更先进和动态用例的见解.

无论如何，在你的情况下，从:

<div className="PartSlot">

  <div className='IconMountLower'> 
    <div className='IconMountUpper'>
        <img [src]="iconAddress" className="Icon" alt="Part icon"/>
    </div>
  </div>

  <div className="PartInfoHolder">
    <div className="Text PartName">{{ partClassName }}</div>
    <div className="Text ModelName">{{ partName }}</div>
    <div className="Text PartPrice">{{ partPrice }}</div>
  </div>

  <div className="ArrowMount">
    <img src="assets/Chevron_right.svg" className="ArrowIcon" alt=""/>
  </div>
  
</div>

为此，解决了您的问题:

<div class="PartSlot">

  <div class='IconMountLower'> 
    <div class='IconMountUpper'>
        <img [src]="iconAddress" className="Icon" alt="Part icon"/>
    </div>
  </div>

  <div class="PartInfoHolder">
    <div class="Text PartName">{{ partClassName }}</div>
    <div class="Text ModelName">{{ partName }}</div>
    <div class="Text PartPrice">{{ partPrice }}</div>
  </div>

  <div class="ArrowMount">
    <img src="assets/Chevron_right.svg" class="ArrowIcon" alt=""/>
  </div>
  
</div>

Working playground个