如何仅针对 angular 4 中的特定组件使用清晰度设计（与其他设计混合）？

Question

我喜欢 Clarity Design System 的 DataGrid。但我只想在一个组件中使用 DataGrid。其他组件应该不会受到影响。

我正在为我的项目使用 Angular CLI。如果我在 .angular-cli.json 中引用 CSS，DataGrid 就可以正常工作，如下所示：

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

如果我将样式直接复制到组件的 .css 文件中，DataGrid 将不起作用。

如何解决我的问题？

Answer 1

遗憾的是，Clarity 不支持仅使用单个组件，您必须在 styles 数组中包含完整的 clarity-ui 样式才能正常工作。由于 Angular 中的封装模式以及它将如何以 Datagrid 无法理解的方式处理 CSS，将其包含在组件样式中会导致问题。

Clarity 是有意创建为一个完整的设计系统，我们不会单独捆绑任何组件以供使用。原因有很多，但主要原因是为了确保正确和一致的用户体验，Clarity 希望成为您应用程序设计的基础。我能提出的最佳建议是让 Clarity 定义您的设计，而不是 Bootstrap.

更新：NPM 上的项目现在位于 @clr/ui 而不是 clarity-ui。

How can I use clarity design just for specific components in angular 4 (mix with other designs)?