Как оформить чипсы PrimeNG?

Question

У меня есть form в моем приложении, где я использую следующий код из Primafaces:

...other inputs...

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

Я могу правильно отобразить элемент Chip, но я хотел бы стилизовать его, указав его ширину100% и высота до 100px, но, кажется, ничто не помогает изменить их. Это решение не сработало для меня.Я попытался установить styleClass или встроенный стиль, как в документации , но они тоже не сработали.Если я пишу inline:

style="width: 100%"

Будет выдана следующая ошибка:

Ошибка: не удается найти другой поддерживающий объект 'width: 100%;'

Как я могу заставить это работать?

Answer 1

Вы можете использовать ht / deep / modifier , добавить это внутри вашего app.component.css и удалить его из вашего style.css, и вам не нужно ! Важно , чтобы заставить стиль здесь, удалите его.вот что вы ищете

p {
  font-family: Lato;
}

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

проверьте здесь https://stackblitz.com/edit/angular-primeng-startup-kmm7xw

Answer 2

Вы можете попробовать инкапсуляцию: 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 { }

Answer 3

есть методы буксировки, чтобы стилизовать элемент primeng, переписать оригинальный стиль или создать пользовательскую базу стилей на основе обычного класса

перезаписать

добавить стиль к глобальному style.css или style.scss, этот метод для перезаписи основного стиля компонента без добавления дополнительного класса к компоненту.

.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;
}

демонстрация стекаблиц ??

обычный стиль

метод, описанный выше, изменит стиль всех компонентов p-chips в проекте entier, с помощью этого метода вам нужно установить свойство 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 ??