각도 4의 특정 구성 요소 (다른 디자인과 혼합)에 대해 선명도 디자인을 사용하려면 어떻게해야합니까?

Question

나는 Clarity Design System의 DataGrid를 좋아한다. 하지만 하나의 구성 요소에서 DataGrid를 사용하기 만하면됩니다. 다른 구성 요소는 영향을받지 않아야합니다.

내 프로젝트에 Angular CLI를 사용하고 있습니다. 데이터 격자는 다음과 같이 내가 .angular-cli.json에 CSS를 참조하는 경우 작동합니다

"styles": [ 
    "../node_modules/bootstrap-4-grid/css/grid.css", 
    "../node_modules/clarity-icons/clarity-icons.min.css" 
] 

나는 componet의 .css 파일에 직접 스타일을 복사하면 데이터 그리드가 작동하지 않습니다.

내 문제를 어떻게 해결할 수 있습니까?

Answer 1

불행히도 Clarity는 개별 구성 요소 만 사용할 수 있도록 지원하지 않으므로 clarity-ui 스타일을 styles 배열에 포함시켜야 작동합니다. 캡슐화 모드가 Angular로되어 있고 Datagrid가 이해하지 못하는 방식으로 CSS를 처리하는 방법 때문에 구성 요소 스타일 내부에 포함하면 문제가 발생할 수 있습니다.

명확성은 전체 디자인 시스템으로 의도적으로 만들어지며 소비를 위해 개별적으로 구성 요소를 번들로 제공하지 않습니다. 여러 가지 이유가 있지만 중요한 것은 일관되고 일관성있는 UX를 보장하는 것입니다. Clarity는 응용 프로그램 디자인의 기반이 될 것으로 기대합니다. 내가 할 수있는 가장 좋은 제안은 Clarity가 부트 스트랩 대신 디자인을 정의하도록하는 것입니다.