編輯PrimeNG組件的CSS

Question

我目前正在開發使用Angular 4，Angular Materials和PrimeNG組件的用戶界面。

我與對抗最新的零部件是從PrimeNG多選組件： https://www.primefaces.org/primeng/#/multiselect

我只是簡單地試圖使組件的寬度適合父組件的100％。

是否有我需要遵循的特定過程來編輯此組件的CSS類？該文檔說，使用「樣式」內聯 - 這是否意味着：

<p-multiSelect [options]="cars" [(ngModel)]="selectedCars" [defaultLabel]="defaultLabel" style="width: 100%;"></p-multiSelect> 

因爲這沒有奏效。

它也表示使用「styleClass」作爲屬性來添加樣式CSS類。你如何使用它？

最後，他們提供PrimeNG組件在網站上使用的CSS類列表（例如ui-multiselect）。當我試圖通過在Angular組件中聲明來修改'ui-multiselect'時，它仍然不起作用。

任何想法？我究竟做錯了什麼？

Answer 1

用於在線PrimeNG造型，使用這樣的：

[style]="{'width': '100%'}" 

要使用styleClass只需添加：

styleClass="example-css-class" 

這種方式，例如，你可以用很多不同風格的多選擇輸入域風格類，例如。 Bootstrap的form-control。

當你與PrimeNG ui的操作，一定要付諸組件的.css。如果您使用全局styles.css，你必須覆蓋.angular-cli.json的PrimeNG文件。您可以通過編輯styles陣列這樣做：

"../node_modules/primeng/resources/primeng.min.css", 
"../node_modules/primeng/resources/themes/omega/theme.css", 
"styles.css" 

當styles.css是在primeng資源後說，它的primeng的，這將覆蓋的樣式後載入。