如何通过外部CSS或Tailwind CSS设置p-button的自定义背景色？

问题分析 #

• 行内样式干扰：你给按钮添加的行内style="background: #161b2900"是带完全透明度的颜色值（十六进制最后两位00表示透明），会直接覆盖外部CSS样式。
• CSS选择器错误：你的外部CSS使用了.p-button .prime-button-black（后代选择器），但prime-button-black是p-button元素自身的类，应该用交集选择器.p-button.prime-button-black（去掉两个类之间的空格）。
• 样式优先级不足：PrimeNG内置的p-button-secondary样式可能有更高优先级，导致自定义样式无法生效。

修正方案 #

步骤1：移除行内干扰样式 #

删掉p-button标签里的style="background: #161b2900;"，避免它强制覆盖自定义样式。

步骤2：修正CSS选择器并调整颜色 #

把外部CSS改成正确的交集选择器，同时设置目标深黑色（注意不要加透明度，比如用#161b29而非#161b2900）：

修正后的HTML代码

<p-button styleClass="p-button-secondary prime-button-black"
          class="ml-3 mb-4 mt-0" (click)="st.toggle($event)">
          <mat-icon class="bg-white text-black rounded-full mr-4" [icIcon]="icAdd"></mat-icon>
          <span>Create System Type</span>
</p-button>

修正后的CSS代码

/* 基础样式，覆盖默认背景 */
.p-button.prime-button-black {
  background-color: #161b29 !important;
  border-color: #161b29 !important; /* 可选：同步按钮边框颜色 */
}

/* 可选：覆盖hover状态样式 */
.p-button.prime-button-black:hover {
  background-color: #0f131a !important;
  border-color: #0f131a !important;
}

额外提示 #

• 若不想用!important，可以通过增加选择器特异性提高优先级，比如结合父容器类：.your-modal-wrapper .p-button.prime-button-black。
• 可以用浏览器开发者工具（F12）查看按钮元素的样式计算结果，确认哪些内置样式在覆盖你的自定义规则，针对性调整选择器。

内容的提问来源于stack exchange，提问作者RAHUL B.K