P粉696146205 2023-08-02 21:58:40 0 1 160
我正在使用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;
}
新手，求教
P粉166779363 采纳为最佳 2023-08-03 11:11:25 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材质样式，但如果你选择这样做，请考虑每种方法的潜在后果。
赞 +0 添加回复