Question 222185 in CSS Question posted in
Some basic documentation can be found here.

Overriding the Material UI CSS style: Angular

I am using Mat-grid-tile tag and i realized that it uses a css class .mat-grid-tile-content which is copy-pasted below.

The problem i am facing is that when I use mat-grid-tile tag, the content inside it is shown in the center, and not in a top to bottom manner.

When i disable from the browser dev tools the align-items: center; property, or when i change it to align-items: flex-start in the below css, it works perfectly (top-to-bottom).

My question is, how can i override this specific property?
I searched and got to know that using inline css will not work, and ng::deep is not a good practice. Please help me out in undertanding how i can override it so that the data is shown in top-bottom manner. if there is any other solution to this, please let me know.

Apparantly chat-gpt does not not about this.

    .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;
}

I am new to angular, please be kind to me.

Tags:

2

Answers


  1. 0

    Unfortunately, changing Angular Material CSS is not straightforward due to encapsulation. You can refer to the following link for more information: https://material.angular.io/guide/customizing-component-styles.

    There isn’t a recommended way to modify Angular Material styles since they are not designed to be easily changed. However, if you still want to proceed, there are three possible approaches:

    1. Disable encapsulation: Disabling encapsulation affects all CSS styling within the component, including elements that are children of other components in your template. You can learn more about it here: https://angular.io/guide/view-encapsulation.

    2. Overwrite the .mat-grid-tile-content class in the style.css file at the root of your Angular project. Any CSS styling there will apply to any HTML template within your project. If the changes don’t take effect, try using the !important keyword at the end of the property.

    3. Use ::ng-deep (deprecated): While ::ng-deep is deprecated, some developers still prefer it as there is no perfect alternative. Be cautious, though, as deprecation may lead to issues in the future.

    In conclusion, modifying Angular Material styles is not recommended, but if you choose to do so, consider the potential consequences of each method.

    Login or Signup to reply.
  2. 0

    You can use encapsulation: ViewEncapsulation.None in the typescript file of the component to apply the css as highest priority.

    Example:-

    HTML code

    enter image description here

    CSS

    enter image description here

    Typescript

    enter image description here

    Sample (Demo)

    enter image description here

    Here I have updated the color of content without using ng-deep.
    This is the correct solution which is suggested by Angular itself.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search