>在模板HTML中内联
>通过设置样式或styleUrls元数据
>使用CSS导入

内联样式：

@Component({
  templateUrl: 'test.html',styles: [`
    .card {
      height: 20px;
      width: 80px;
    }
  `],})

使用外部样式表：

@Component({
  styleUrls: ['css/mystyle.css'],templateUrl: 'test.html',})

CSS导入：

@import 'hero-details-Box.css';

组件样式也有来自shadow DOM样式范围的特殊选择器.例如可能有一个CSS主题类应用于该文档：

:host-context(.theme-light) h2 {
  background-color: #eef;
}

通常的做法是将组件的代码,HTML和CSS拆分为同一目录中的三个单独文件：

quest-summary.component.ts
quest-summary.component.html
quest-summary.component.css

请访问Component styles以了解更多信息.

如果您想进一步增强它并使用SAS,请访问ANGULAR2 SASS以获取更多详细信息.

styleUrls: ['./sassexample.component.scss']

如果您想使用用于UI组件的库,请查看以下内容：

PrimeNG

Material

NG bootsrap

希望这会有所帮助.

干杯!!