PrimeNG Calendar组件文本居中样式不生效问题求助

你的CSS选择器与HTML组件的类名不匹配，导致样式未生效，同时需要确保选择器能覆盖PrimeNG的默认样式，以下是修正方案：

修正后CSS #

::ng-deep p-calendar.date .p-inputtext {
    border: 1px solid black;
    background: #eeeeee;
    text-align: center !important;
}

若仍不生效，可使用更精准的DOM结构选择器：

::ng-deep p-calendar.date > .p-calendar > input.p-inputtext {
    border: 1px solid black;
    background: #eeeeee;
    text-align: center !important;
}

关键说明 #

• 你HTML中p-calendar的类是date，原CSS里的.calendar-control是错误的，需替换为.date
• 通过::ng-deep穿透组件样式隔离，确保自定义样式能作用到PrimeNG内部的input元素
• 若浏览器开发者工具显示text-align仍被覆盖，可增加选择器优先级（比如加上组件ID：#tdate）

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