Primeng 自定义样式步骤显示为按钮而不是一行

Question

我正在尝试在我的应用程序中实现primeng Steps。我按照文档中的示例创建自定义样式步骤。相反，我正在获得标准的样式步骤。.css 文件中的书面样式类。

step1.component.html
------------------------
<div>
<p-steps [model]="items" styleClass="steps-custom" [(activeIndex)]="activeIndex" ></p-steps>
</div>

step1.component.ts
--------------------

@Component({
    selector: 'app-routing',
    templateUrl: './step1.component.html',
    styleUrls: ['./step1.component.css'],
    providers: [RoutingService]
})

export class Step1Component  implements OnInit {

  items: MenuItem[];
  activeIndex: number = 1;

  constructor(private routingService: RoutingService) {
  }

  ngOnInit() {
    this.items = [{
      label: 'Personal',
      command: (event: any) => {
        this.activeIndex = 0;
      }
    },
      {
        label: 'Seat',
        command: (event: any) => {
          this.activeIndex = 1;
        }
      },
      {
        label: 'Payment',
        command: (event: any) => {
          this.activeIndex = 2;
        }
      },
      {
        label: 'Confirmation',
        command: (event: any) => {
          this.activeIndex = 3;

        }
      }
    ];
  }
}

step1.component.css
----------------------
.ui-steps .ui-steps-item {
  width: 25%;
}

.ui-steps.steps-custom {
  margin-bottom: 30px;
}

.ui-steps.steps-custom .ui-steps-item .ui-menuitem-link {
  height: 10px;
  padding: 0 1em;
}

.ui-steps.steps-custom .ui-steps-item .ui-steps-number {
  background-color: #0081c2;
  color: #FFFFFF;
  display: inline-block;
  width: 36px;
  border-radius: 50%;
  margin-top: -14px;
  margin-bottom: 10px;
}

.ui-steps.steps-custom .ui-steps-item .ui-steps-title {
  color: #555555;
}

看起来没有应用 styleClass 。你能告诉我如何将自定义样式应用于primeng步骤吗？

Answer 1

使用 Primeng 组件时要记住的一些良好做法。

1. 检查您将哪个主题应用于组件。样式会根据您选择的主题而改变。

2. :host::ng-deep 用于样式隔离 - 即一个特性的样式开始干扰另一个特性的样式。避免 shadow DOM 继承此样式

因此，在您的情况下，如果您想将自己的自定义样式应用于组件

:host::ng-deep .ui-steps .ui-steps-item {
  width: 25%;
}

:host::ng-deep .ui-steps.steps-custom {
  margin-bottom: 30px;
}

:host::ng-deep .ui-steps.steps-custom .ui-steps-item .ui-menuitem-link {
  height: 10px;
  padding: 0 1em;
}

:host::ng-deep .ui-steps.steps-custom .ui-steps-item .ui-steps-number {
  background-color: #0081c2;
  color: #FFFFFF;
  display: inline-block;
  width: 36px;
  border-radius: 50%;
  margin-top: -14px;
  margin-bottom: 10px;
}

:host::ng-deep .ui-steps.steps-custom .ui-steps-item .ui-steps-title {
  color: #555555;
}

或者你可以在 :host::ng-deep 下嵌套在 css 中，如下例所示

:host::ng-deep {
  //setting height for the honey blending panel properties
  .ui-panel-content.ui-widget-content {
    min-height: 312px;
  }
  .ui-state-default {
    border: 1px solid $color_iron;
  }
  .ui-chkbox-label {
    margin-bottom: 0;
  }
  .ui-radiobutton-label {
    margin-bottom: 0;
  }
}

希望能帮助到你