编辑PrimeNG组件的CSS [英] Editing CSS for PrimeNG Components
问题描述
我目前正在使用Angular 4,Angular Materials和PrimeNG组件开发用户界面.
I am currently developing a user interface using Angular 4, Angular Materials and PrimeNG components.
我正在使用的最新组件是PrimeNG的MultiSelect组件: https://www.primefaces.org/primeng/#/multiselect
The latest component I am battling with is the MultiSelect Component from PrimeNG: https://www.primefaces.org/primeng/#/multiselect
我只是试图使组件的宽度适合父组件的100%.
I am simply just trying to make the component's width fit 100% of the parent component.
我需要遵循特定的过程来编辑此组件的CSS类吗?该文档说要对内联使用样式"-这是否意味着:
Is there a specific process I need to follow to edit CSS classes for this component? The documentation says to use "Style" for inline - does this mean:
<p-multiSelect [options]="cars" [(ngModel)]="selectedCars" [defaultLabel]="defaultLabel" style="width: 100%;"></p-multiSelect>
因为这不起作用.
它还说使用"styleClass"作为属性来添加样式CSS类.您如何使用它?
It also says to use "styleClass" as a property to add a styling CSS class. How do you use this?
最后,它们提供了PrimeNG组件在网站上使用的CSS类的列表(例如ui-multiselect).当我尝试通过在Angular组件CSS中声明'ui-multiselect'来修改它时,它仍然不起作用.
Lastly, they provide a list of the CSS classes the PrimeNG component uses on the website (e.g. ui-multiselect). When I attempt to modify 'ui-multiselect' by declaring it within the Angular components CSS, it still doesn't work.
有什么想法吗?我在做什么错了?
Any ideas? What am I doing wrong?
推荐答案
对于内联PrimeNG样式,请使用类似以下内容的东西:
For inline PrimeNG styling, use something like this:
[style]="{'width': '100%'}"
要使用styleClass
,只需添加:
styleClass="example-css-class"
例如,通过这种方法,您可以使用许多不同的样式类(例如)来对多选输入字段进行样式设置.引导程序的form-control
.
This way, for example, you can style multi select input field with many different style classes, eg. Bootstrap's form-control
.
使用PrimeNG ui
进行操作时,请确保将它们放入组件.css中.如果使用全局styles.css
,则必须覆盖.angular-cli.json
中的PrimeNG文件.您可以通过编辑styles
数组来做到这一点:
When you operate with PrimeNG ui
's, be sure to put them into components .css. If you use global styles.css
, you'll have to override the PrimeNG files in .angular-cli.json
. You can do it by editing styles
array like this:
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/primeng/resources/themes/omega/theme.css",
"styles.css"
将styles.css
放在primeng资源之后,它会在primeng资源之后加载,这将覆盖样式.
When the styles.css
are put after the primeng resources, it is loaded after the primeng's, which will override the styles.
这篇关于编辑PrimeNG组件的CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!