css - 如何设计 PrimeNG 芯片？

Question

我的应用程序中有一个表单，我在其中使用了来自 Primafaces 的以下代码:

...other inputs...

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

我能够正确显示 Chip 元素，但我想设置其宽度为 100% 和高度为 100px 的样式，但似乎无法更改这些元素。 This solution没有为我工作。我试图将 styleClass 或内联样式设置为 the documentation建议，但他们也没有工作。如果我写内联:

style="width: 100%"

抛出以下错误:

Error: Cannot find a differ supporting object 'width: 100%;'

我怎样才能让它发挥作用？

Answer 1

有两种方法可以使 primeng 组件的样式覆盖原始样式，或者通过基于客户类创建自定义样式

覆盖

将样式添加到全局 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属性< strong>对于每个组件

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

样式.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 🍊🍊