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

Css – Why i can't edit mat-button padding?

default padding of mat-button’s, i need to subscribe the default padding (16px)

I’ve been trying to set the padding of a mat-button, but the component’s style isn’t changing. What can I do, I’ve already tried changing CSS properties, but none of them solve the problem

Tags:

2

Answers


  1. 0

    I don’t work with exact mat-button but work with similar 3rd party libraries and can provide usuall steps to override such styles:

    1. pass styles or style classes to the componen if it accept ones or use inline styles.
    2. global classes with higher precision (scope to your angular component if it necessary only there)
    3. global styles with !important
    4. ::ng-deep.

    Last one is better not to use at all. The 3rd one should be used only for styles which are already provided as inline by the 3rd party library.

    Login or Signup to reply.
  2. 0

    The simplest method if you are changing padding only for buttons in that specific component is to add a class and style it in that component’s css or sass file.

    If you are doing it globally for all mat-buttons use .mat-button { padding: 10px !important; } in your styles.sass

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

Back To Top
Search