타사 구성 요소에 사용자 정의 스타일을 추가하는 방법은 무엇입니까?

Question

npm을 통해 다운로드 한 타사 구성 요소의 스타일을 사용자 정의하는 데 권장되는 방법은 무엇입니까?

예를 들어, 구성 요소 ng2-tag-input. Webpack 빌드를 실행하여 모든 타사 js 파일을 vendor.js에 묶고 모든 타사 CSS를 vendor.css에 묶습니다.

빌드시 생성되므로 vendor.css으로 변경하거나 커밋하고 싶지 않습니다.

ng2-tag-input에 내 스타일을 추가하고 싶다고 말하면 어떻게해야합니까? 나 자신의 스타일을 내 자신의 site.css에서 무시해야 하는가 아니면 다른 방법이 있습니까?

Answer 1

분명히 node_modules가 코드 저장소 및 변경 사항에 포함되어서는 안되기 때문에 node_modules 폴더에서 수정할 수 없습니다. 자신의 CSS를

1. 재정의 스타일 (보다 구체적인 규칙)
2. 는 NPM을 사용하고 난 실제로 두 번째 옵션을 선호하는 TS/CSS를 수동으로

포함되지 않습니다 : 그래서 두 가지 옵션이 있습니다 때로는 서로 다른 플러그인 버전간에 호환성이 보장되지 않기 때문에 구성 요소를 변경해야합니다.

Answer 2

다음을 사용할 수 있습니다. host >>>. third party-class.

에뮬레이트 된보기 캡슐화에서만/deep/및 >>> 선택기를 사용하십시오.

소스 : https://angular.io/guide/component-styles#deep