Angular 不应用全局定义的样式

Question

在 styles.css 中，我将 mat-expansion-panel 定义为具有以下边距

mat-expansion-panel {
    margin: 2vh;
}

但是，除非在本地 css 文件中指定，否则这不会应用到我的组件中。

即使尝试从组件指令导入 styles.css 也行不通

@Component({
  ...
  styleUrls: ['./list.component.css', '../../../styles.css']
})

因为我会得到以下错误

./src/styles.css - Error: No template for dependency: CssDependency

Error: The loader ".../src/styles.css" didn't return a string

Answer 1

尝试在 styles.css

中使用以下内容

.mat-expansion-panel {
    margin: 2vh !important;
}

但是如果您只想将这些样式应用到一个扩展面板，您可以应用唯一 ID 或将 class 分配给该特定扩展面板。

EXPLAINATION：发生的事情是 angular material 本身在 .mat-expansion-panel 上添加边距，并且此样式覆盖了我们的自定义样式。 !important increases importance(css-specifity) 的 css rule.Thus，我们的规则覆盖默认 css。

Stackblitz

Angular 不应用全局定义的样式

Angular does not apply global defined styles

css

styling

typescript

angular