自訂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材質樣式，但如果你選擇這樣做，請考慮每種方法的潛在後果。