PTC Thingworx의 custom css 꿀팁 메모
ThingWorx Web Component SDK - Polymer => 문서 참고
Thingworx에서는 위의 빨간 밑줄 같이 PTC전용 컴포넌트가 나올때는 일반적인 CSS로 셀렉팅을 하여 CSS문법을 사용할 수 없다.
ptcs-confirmation-dialog::part(dialog) {
border-radius : 27px;
}
ptcs-confirmation-dialog::part(primary-button), ptcs-confirmation-dialog::part(cancel-button){
border-radius : 27px;
width: 160px;
height: 54px;
margin-left:6px;
}
아래와 같이 컴포넘트를 아무 기호없이 선언하여 파트를 찾아가면서 대 => 소로 들어가여 셀렉팅을 하여야 한다. 역시 컴포넌트 SDK 문서를 보면 아래와 같이
part부분과 subcomponents 부분을 확인하고 셀렉터를 작성하여 css를 작성할 수 있다.
한가지 예외가 있다면 바로 wc라고 하는 shadow DOM 컴포넌트를 지정하는 구분자가 나오는데 개발자 노트에서 내가 css를 작성해야할 셀렉터에 해당 구분자가 있다면 일반적인 방법으론 css를 작성할 수 없다.
따라서 이제 사장된 방법이라고 하는 @support라고 하는 문법을 써서 css 를 작성해야 한다.
@supports (ptcs-style-unit: "PTCS-GRID:grid-control:data-filter"){
[part~=top-bar]{
padding: 0 !important;
}
}
위는 그 방법의 예시이다.
ptcs-style-unit이라는 컴포넌트인데 이 컴포넌트는 @support 문법으로 작성하여야지 css 작성이 가능하다.
위의 컴포넌트의 css를 작성할 때 쓴 예시이다. wc 구분자로 나타나 있는 "PTCS-GRID:grid-control:data-filter"를 해당 위치에 넣고 아래에는 개발자 노트에 나와있는 part명들을 작성하여 css 작성을 마무리하면 된다. 간혹 적용하여도 바뀌지 않을 때가 있는데 이는 내가 작성하고 있는 custom css보다 상위에 css 파일에서 작성된 문법이 이미 존재하여 적용이 되지 않는 것이므로 !important를 써 css 적용 우선순위를 높여주면 된다.
