How to target angular material stepper padding with CSS?

问题

I am trying to decrease the padding, on an angular material stepper component, since I am developing a compact from this:

To remove the padding here:

Ibn the official angular material documentation, they point out that you should create a specific selector. I just don't know how to do that. I have tried the following:

In the chrome tools, I have found a CSS class .mat-horizontal-stepper-header. I am trying to decrease the padding from 24 pixels to 10px like this:

.mat-horizontal-stepper-header {
  padding: 14px !important;
}

It does not work. I have created a Stackblitz here, to illustrate the problem.

回答1:

Try this. Add this css to style.css

.mat-stepper-horizontal .mat-horizontal-stepper-header {
    padding: 10px;
    height:auto;
}
.mat-stepper-horizontal .mat-stepper-horizontal-line {
    margin: 0 -4px; 
}

来源：https://stackoverflow.com/questions/50074954/how-to-target-angular-material-stepper-padding-with-css