自定义Angular Material UI CSS样式

Question

我正在使用Mat-grid-tile标签，我意识到它使用了一个css类。Mat-grid-tile -content，它是复制粘贴在下面的。

我面临的问题是，当我使用垫子-网格-瓷砖标签时，它里面的内容显示在中心，而不是从上到下的方式。

当我从浏览器的开发工具禁用align-items: center;属性，或者当我在下面的css中将其更改为align-items: flex-start时，它可以完美地工作(从上到下)。

我的问题是，我怎么能覆盖这个特定的属性?我搜索并了解到使用内联css将不起作用，并且ng::deep不是一个好的实践。请帮助我了解我如何能够覆盖它，使数据显示在自上而下的方式。如果有其他的解决方法，请告诉我。

很显然，闲聊并不关心这个。

.mat-grid-tile-content {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
    margin: 0;
}

新手，求教

Answer 1

不幸的是，由于封装的原因，改变Angular Material的CSS并不简单。您可以参考以下链接了解更多信息:https://material.angular.io/guide/customizing-component-styles。

没有推荐的方法来修改Angular材质样式，因为它们的设计不容易改变。然而，如果你仍然想继续，有三种可能的方法:

禁用封装:禁用封装会影响组件中的所有CSS样式，包括模板中其他组件的子元素。你可以在这里了解更多:https://angular.io/guide/view-encapsulation。

覆盖Angular项目根目录下的style.css文件中的.mat-grid-tile-content类。任何CSS样式都将应用于项目中的任何HTML模板。如果更改没有生效，请尝试在属性末尾使用!important关键字。

使用::ng-deep(已弃用):虽然::ng-deep已弃用，但一些开发人员仍然喜欢它，因为没有完美的替代方案。不过要小心，因为弃用可能会在将来导致问题。

总之，不建议修改Angular材质样式，但如果你选择这样做，请考虑每种方法的潜在后果。