如何使用CSS定位角材料步进填充? [英] 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:

要在此处删除填充:

在官方的角材料文档中，他们指出您应该创建一个特定的选择器.我只是不知道该怎么做.我尝试了以下方法:

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:

在chrome工具中，我发现了一个CSS类.mat-horizontal-stepper-header.我正在尝试将填充从24像素减少到10像素，如下所示:

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

它不起作用.我创建了一个此处的Stackblitz ，以说明此问题.

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

推荐答案

尝试一下.将此CSS添加到style.css

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

这篇关于如何使用CSS定位角材料步进填充?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！