Primeng p-password组件宽度无法适配容器的问题求助

问题场景 #

使用PrimeNG开发登录页面时，其余组件（如输入框、按钮）均可正常适配容器宽度，但p-password组件无法跟随容器宽度自适应，代码如下：

<div class="flex flex-column align-items-center gap-3 text-center">
    <span class="p-input-icon-left w-full">
        <i class="pi pi-user"></i>
        <input id="email1" type="email" pInputText class="w-full" placeholder="Username" />
    </span>

    <p-password id="password1" type="password" class="w-full" [feedback]="false" placeholder="Password"
        [toggleMask]="true"></p-password>

    <button routerLink="/dashboard" pButton pRipple label="Log In" class="w-full"></button>
</div>

解决方案 #

方法1：利用组件自带属性传递样式 #

p-password组件提供了inputStyleClass属性，可直接为内部的输入框元素指定样式类。添加该属性并设置为w-full，即可让输入框继承容器宽度：

<p-password id="password1" type="password" class="w-full" [feedback]="false" placeholder="Password"
    [toggleMask]="true" inputStyleClass="w-full"></p-password>

方法2：自定义CSS覆盖默认样式 #

若上述方法不生效，可通过自定义CSS强制覆盖组件的默认宽度限制：

/* 让p-password容器占满宽度 */
.p-password {
    width: 100% !important;
}

/* 让内部输入框占满容器宽度 */
.p-password .p-inputtext {
    width: 100% !important;
}

原因说明 #

PrimeNG的p-password组件内部包含输入框和切换掩码的按钮元素，默认样式可能未设置输入框继承父容器宽度。通过inputStyleClass直接给内部输入框应用PrimeFlex的w-full类，或用CSS强制覆盖默认宽度规则，即可实现和其他输入框一致的自适应效果。

内容的提问来源于stack exchange，提问作者Ricardo Ruíz Alarcón