Как я могу использовать дизайн ясности только для определенных компонентов в angular 4 (смешивать с другими дизайнами)?

Мне нравится DataGrid от Clarity Design System. Но я хочу просто использовать DataGrid в одном компоненте. Другие компоненты не должны быть затронуты.

Я использую Angular CLI для своего проекта. DataGrid просто работает, если я ссылаюсь на CSS в .angular-cli.json следующим образом:

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

DataGrid не работает, если я копирую стили непосредственно в файл .css компонента.

Как можно решить мою проблему?


installation angular configuration css vmware-clarity
person Zeljko Dujmovic    schedule 15.11.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

К сожалению, Clarity не поддерживает использование только отдельных компонентов, и вы должны включить полные стили clarity-ui в свой массив styles, чтобы он работал. Включение его в стили компонентов вызовет проблемы из-за режима инкапсуляции в Angular и того, как он будет обрабатывать CSS способами, которые Datagrid не поймет.

Clarity намеренно создана как полноценная система дизайна, и мы не объединяем какие-либо компоненты по отдельности для использования. Есть много причин, но главная из них заключается в том, что для обеспечения правильного и последовательного UX Clarity предполагается, что он станет основой дизайна вашего приложения. Лучшее предложение, которое я могу сделать, это позволить Clarity определять ваш дизайн вместо Bootstrap.

ОБНОВЛЕНИЕ: проект на NPM теперь имеет номер @clr/ui вместо clarity-ui.

person Jeremy Wilken    schedule 15.11.2017