如何使用 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 官方角度材料文档，他们指出您应该创建一个特定的选择器.我只是不知道该怎么做.我尝试了以下方法:

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-h​​orizo​​ntal-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 here 来说明问题.

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屋！