Search code examples
cssangularconfigurationinstallationvmware-clarity

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

I like the DataGrid from Clarity Design System. But I want just to use the DataGrid in one component. The other components shouldn't be affected.

I'm using Angular CLI for my project. The DataGrid just works if I reference the CSS in the .angular-cli.json as follows:

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

The DataGrid doesn't work if I copy the styles directly to the componet's .css file.

How can my problem be solved?

Solution

  • Unfortunately, Clarity does not provide support for the use of just individual components, and you must include the full clarity-ui styles in your styles array for it to work. Including it inside of the component styles will cause issues because of encapsulation mode in Angular and how it will process the CSS in ways that the Datagrid will not understand.

    Clarity is intentionally created as a full design system, and we don't bundle any of the components individually for consumption. There are many reasons, but the major one is that to ensure proper and consistent UX Clarity expects to be the foundation of your application design. The best suggestion I can make is to let Clarity define your design instead of Bootstrap.

    UPDATE: The project on NPM is now at @clr/ui instead of clarity-ui.