Wie kann ich Klarheit Design nur für bestimmte Komponenten in eckigen 4 (Mix mit anderen Designs) verwenden?

Question

Ich mag das DataGrid von Clarity Design System. Aber ich möchte nur das DataGrid in einer Komponente verwenden. Die anderen Komponenten sollten nicht betroffen sein.

Ich benutze Angular CLI für mein Projekt. Das Datagrid funktioniert nur, wenn ich die CSS im .angular-cli.json Referenz wie folgt:

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

Das Datagrid funktioniert nicht, wenn ich die Stile direkt an die componet der CSS-Datei kopieren.

Wie kann mein Problem gelöst werden?

Answer 1

Leider bietet Clarity keine Unterstützung für die Verwendung von nur einzelnen Komponenten, und Sie müssen die vollständigen clarity-ui Stile in Ihre styles-Array für die Arbeit enthalten. Wenn Sie es innerhalb der Komponentenstile einfügen, führt dies zu Problemen aufgrund des Kapselungsmodus in Angular und der Art und Weise, in der das CSS so verarbeitet wird, wie es das Datagrid nicht versteht.

Clarity wird absichtlich als vollständiges Designsystem erstellt, und wir bündeln keine Komponenten einzeln für den Verbrauch. Es gibt viele Gründe, aber die wichtigste ist, dass UX Clarity die Grundlage für Ihr Anwendungsdesign sein wird, um eine ordnungsgemäße und konsistente Darstellung sicherzustellen. Der beste Vorschlag, den ich machen kann, ist, dass Clarity dein Design anstelle von Bootstrap definiert.