PrimeNG 대화 상자에서 스타일 적용

Question

PrimeNG 대화 상자에서 스타일을 적용하는 데 문제가 있습니다.

<p-dialog header="Filters" [(visible)]="display" width="1000" height="1000" modal="modal"> 
... 
</p-dialog> 

나는 또한 내가 구성 요소의 스타일을 가지고하는 SCS 파일이 :

은 내가 PrimeNG 대화 상자가 구성 요소를 가지고있다. 대화 상자의 배경색은 투명하지만 흰색으로 설정하고 싶습니다. 그래서 난 내하는 SCS 파일에 다른 방식으로 스타일을 적용하려고했습니다

.ui-dialog { 
    background-color: #fff; 
} 

대화에 styleClass를 추가하고 여기에 스타일을 적용하려고 : 그들의

<p-dialog styleClass="dialog-filters" header="Filters" [(visible)]="display" width="1000" height="1000" modal="modal"> 

.dialog-filters { 
    background-color: #fff; 
} 

없음 작동하지 않습니다. 어떤 생각?

Answer 1

스타일 인수로는 []을 사용해야합니다. 예를 들어 <p-dialog [style]="{'margin-left':'80px', 'margin-right':'80px'}"></p-dialog>과 같은 p-dialog에 인라인 스타일을 적용하고자 할 때.

나는 적어도 자신의 웹 사이트를 볼 때, 자주 업데이트되지 않는 [], 아무것도 또는 [()]를 필요로 할 때 나는 혼란 스럽다는 것을 인정해야한다. 따라서 github에서 소스 코드를 살펴 보는 것이 좋습니다.

당신은 다음과 같이 p-dialog의 styleClass 속성을 사용할 수 있습니다

Answer 2

, CSS 파일에

<p-dialog header="Title" [(visible)]="display" modal="modal" width="300" styleClass="active" > 
.... 

스타일은 당신이 ui-dialog 클래스를 사용하는 경우 또는

.active{ 
    background-color:red 
} 

로, 당신이 그들을 사용해야 할 것이다 계층 구조는 아래와 같습니다.

p-dialog .ui-dialog { 
    background-color: red; 
} 

LIVE DEMO에는 두 가지 방법이 모두 포함되어 있습니다.