首頁  >  問答  >  主體

自訂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 天前492

全部回覆(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
  • 取消回覆