요소 내부의 p-dialog요소 에 스타일을 추가하려고했지만 Angular의 CSS 캡슐화로 인해 스타일이 적용되지 않는 것 같습니다.
p-dialog내 앱의 CSS 캡슐화 속성을 변경하지 않고 내부 요소에 스타일을 추가하려면 어떻게 해야합니까?
편집하다 -
<p-dialog [(visible)]="display" modal="modal" width="788" [responsive]="false">
<p-header style="float:left">
New Item
</p-header>
<div style="float:left;">
</div>
...
...
<p-footer>
<button type="button" (click)="display=false">Save</button>
<button type="button" (click)="display=false">Cancel</button>
</p-footer>
</p-dialog>
Save및 Cancel버튼에 스타일을 적용하고 싶습니다 . 및 p-dialog.
<p-dialog>한 가지 방법은 <p-dialog>대괄호를 사용하여 태그를 인라인 스타일로 지정하는 것입니다 [].
<p-dialog [style]="{'color':'red'}"></p-dialog>
속성 p-dialog을 설정 하여 요소의 스타일을 지정할 수도 있습니다 styleClass.
<p-dialog styleClass="myClass"></p-dialog>
CSS를 사용하면 클래스 이름으로 선택합니다.
.myClass {
color: red;
}
p-dialog다른 HTML 요소처럼 태그에 포함 된 요소의 스타일을 지정할 수 있습니다. 클래스 속성을 하위 요소에 추가하기 만하면됩니다.
<p-dialog [(visible)]="display" modal="modal" width="788" [responsive]="false">
<p-header class="dialogHeader">
New Item
</p-header>
</p-dialog>
CSS의 선택기로 선택합니다.
.dialogHeader {
float: left;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다