如何设计PrimeNG芯片？

Question

我的应用程序中有一个form，其中我使用了来自Primaface的以下代码：

...other inputs...

<label for="workshopTags">Tags</label>
<p-chips
    [(ngModel)]="values"
    name="workshopTags"
    id="workshopTags"
></p-chips>

我能够正确地显示芯片元素，但我想将它的宽度设置为100%，高度为100 am，但是似乎没有什么可以改变这些。这个解决方案不是为我工作的。我试图设置styleClass或内联样式，就像文献资料建议的那样，但它们也没有工作。如果我写内联：

style="width: 100%"

引发以下错误：

错误:无法找到不同的支持对象“宽度:100%；”

我怎么才能让它起作用？

Answer 1

有两种方法用于样式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演示

角质型

上面的方法将改变整个项目中所有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演示

Answer 2

您可以使用ht /深层/修饰符，将其添加到您的中并从style.css中删除它，并且您不需要！重要的来强制这里的样式，删除它。这是你要找的东西

p {
  font-family: Lato;
}

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

看看这里，https://stackblitz.com/edit/angular-primeng-startup-kmm7xw

Answer 3

您可以尝试在覆盖组件装饰器中封装: ViewEncapsulation.None：

@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 { }