Question

我的应用程序中有一个form，我在其中使用Primafaces中的以下代码：

...other inputs...

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

我能够正确显示Chip元素，但是我想对其进行样式设置，将其宽度设置为100％，将高度设置为100px，但是似乎没有任何改变的方法。 This solution对我不起作用。我尝试按照the documentation的建议设置styleClass或内联样式，但是它们也不起作用。如果我内联：

style="width: 100%"

引发以下错误：

错误：找不到其他支持对象“宽度：100％；”

我如何使其工作？

Answer 1

您可以使用ht / deep /修饰符，将其添加到 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

检查

Answer 2

有两种方法可以样式化主要组件以覆盖原始样式或通过基于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芯片组件的样式，通过此方法，您需要设置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

Answer 3

您可以尝试封装：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 { }

如何设计PrimeNG芯片？

3 个答案: