有两种方法来样式primeng组件覆盖原来的样式或通过创建一个基于custome类的自定义样式

• 覆盖 *

将样式添加到全局style.css或style.scss中，此方法用于覆盖primeng组件样式而无需添加额外的类到组件中。

.ui-chips {
  display: inline-block
}

.ui-chips ul {
  border:2px dashed green !important; /* 👈 I have use important */
}

 .ui-chips > ul.ui-inputtext .ui-chips-token {
    font-size: 14px;
    background: green !important; /* 👈 I have use important */
    border:1px solid #005555;
    box-shadow: 0 0 25px #ccc;
}

stackblitz demo 🍏🍏

• 定制风格 *

上述方法将更改整个项目中所有p-chips组件的样式，通过此方法，您需要设置styleClass属性，以便创建不同的样式，如此处的示例👇，但您需要为每个组件设置styleClass属性****

<p-chips [(ngModel)]="values" styleClass="p-chips"></p-chips>

style.css

.p-chips.ui-chips {
  /* border:1px solid #ff2200; */
  display: inline-block
}

.p-chips.ui-chips ul {
  border:2px dashed orange;
}

 .p-chips.ui-chips > ul.ui-inputtext .ui-chips-token {
    font-size: 14px;
    background: orange;
    border:1px solid #ff5555;
    box-shadow: 0 0 25px #ccc;
}

stackblitz demo 🍊🍊

你可以使用ht**/deep/ modifier**，把它添加到你的app.component.css中，然后从你的style.css中删除它，你不需要**！important**来强制样式在这里，删除它。这是你要找的

p {
  font-family: Lato;
}

/deep/  .p-chips > .ui-inputtext {
  width: 100%;
  height:  100px;
}

在此检查https://stackblitz.com/edit/angular-primeng-startup-kmm7xw

您可以尝试封装：ViewEncapsulation。重写组件装饰器中无：

@Component({
   selector: 'app-chip',
   templateUrl: 'path-to-template where you use ui-chips',
   styleUrls: ['path-to-styles where you could override ui-chips styles'],
   encapsulation: ViewEncapsulation.None
})
export class AppChipComponent { }

要将宽度设置为100%，必须使用style或styleClass属性并设置css属性display: block。
例如，使用styleClass属性

<p-chips
    [(ngModel)]="interests"
    styleClass="block">
</p-chips>

这里我使用的是Prime Flex v3和PrimeNg。