我们可以更改角材料组件的样式吗？

Question

我想按照我的设计样式化角形材料组件。我搜索了互联网，但没有找到相同的方法。

Answer 1

如果您想自定义Angular材质组件并提供自己的样式，我有以下建议。您可以使用其中之一。

1）覆盖您主要的style.css（或style.scss，无论使用哪种）上的类。如果您想知道，它是与index.html，main.ts，package.json等位于同一目录级别的目录。您可能需要添加！important声明

.mat-form-field-label {
  color:blue!important;
}

2）在该特定组件上使用ViewEncapsulation:None。这将删除所有封装，这样CSS规则将具有全局作用。这样，您可以通过编辑component.css上的类来自定义CSS属性。

3）/deep/的用法。（但是，很快就会弃用deprecated，因此，我不建议您长期使用它）

在您的component.ts上，

:host /deep/ .mat-form-field {
  text-align: left !important;
}

4）为指令提供自定义类

<mat-placeholder class="placeholder">Search</mat-placeholder>

在您的CSS上，

.placeholder {
  color: green
}