PrimeNG Steps组件移动端隐藏禁用项问题求助

你的CSS选择器结构有误，PrimeNG中禁用的步骤项是.p-steps-item直接携带.p-disabled类，并非嵌套关系。调整SCSS代码如下：

@media screen and (max-width: 768px) {
    .custom-steps .p-steps-item.p-disabled {
        display: none;
    }
}

如果上述代码仍不生效，可能是样式优先级被组件默认样式覆盖，可以尝试提升优先级：

@media screen and (max-width: 768px) {
    :host .custom-steps .p-steps-item.p-disabled {
        display: none !important;
    }
}

另外，你的HTML代码存在标签未闭合的问题，修正为：

<p-steps [model]="steps" [readonly]="true" [activeIndex]="activeIndex" [styleClass]="'custom-steps'"></p-steps>

调整后即可在屏幕宽度≤768px时隐藏所有禁用的步骤项。

内容的提问来源于stack exchange，提问作者Antoine