首页  >  问答  >  正文

自定义Angular Material UI CSS样式

<p>我正在使用Mat-grid-tile标签,我意识到它使用了一个css类。Mat-grid-tile -content,它是复制粘贴在下面的。<br /><br />我面临的问题是,当我使用垫子-网格-瓷砖标签时,它里面的内容显示在中心,而不是从上到下的方式。<br /><br />当我从浏览器的开发工具禁用align-items: center;属性,或者当我在下面的css中将其更改为align-items: flex-start时,它可以完美地工作(从上到下)。<br /><br />我的问题是,我怎么能覆盖这个特定的属性?我搜索并了解到使用内联css将不起作用,并且ng::deep不是一个好的实践。请帮助我了解我如何能够覆盖它,使数据显示在自上而下的方式。如果有其他的解决方法,请告诉我。<br /><br />很显然,闲聊并不关心这个。</p><p><br /></p> <pre class="brush:php;toolbar:false;">.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; }</pre> <p>新手,求教</p>
P粉696146205P粉696146205467 天前490

全部回复(1)我来回复

  • P粉166779363

    P粉1667793632023-08-03 11:11:25

    不幸的是,由于封装的原因,改变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
  • 取消回复