So verwalten Sie Konflikte mit Dritten CSS

Question

Ich arbeite an einer Webanwendung, die Materialise als Front-End-Framework zusammen mit Kendo UI für die Grid-Komponente verwendet.

Ich treffe Probleme in Fällen, wo beide Kendo UI und Materialize Stile für das gleiche Element haben - zum Beispiel, sie beide überschreiben die Gestaltung auf Kontrollkästchen - dies führt zu einem gebrochenen Layout aufgrund der Kollision.

Eine Option, die ich realisiere, ist entweder Materialise oder Kendo UI zu wählen und die anderen fallen zu lassen ... aber ich würde das gerne vermeiden, da sie die Schwächen der anderen gut ergänzt haben. Wenn es nur ein Element hier oder da wäre, wäre das Setzen von spezifischen Überschreibungen eine Option, aber mit der Skalierung der beiden Frameworks wäre dies ein Wartungsalbtraum, da, wenn man die Überschreibungen änderte, diese möglicherweise refaktoriert werden müssten.

Gibt es Möglichkeiten, dieses Problem zu lösen, das ich vermisse?

Answer 1

Eine Möglichkeit zur Vermeidung eines solchen Konflikts besteht darin, das MaterializeCSS so zu erstellen, dass es nur die Teile enthält, die Sie für Ihr Projekt benötigen.

Zum Beispiel, wenn Sie nicht die Tasten Styling von MaterializeCSS benötigen, könnten Sie einfach über Sass, kompilieren materialize.scss und Cherry Pick-Tasten aus der Datei.

Wenn Sie den Weg zum Erstellen Ihrer benutzerdefinierten CSS-Datei von Materialise einschlagen, können Sie versuchen, materialize.khophi.co (Disclaimer: ich habe es gebaut).

Mehr darüber, wie Ihr MaterializeCSS anpassen: http://materializecss.com/getting-started.html

Answer 2

Ich weiß, es ist in der Regel vorgeschlagen, Code nicht zu duplizieren, und Sie wollen versuchen, von Überschreibungen wegzulenken, aber wäre es möglich, den Abschnitt von CSS zu finden (dh wählen Sie aus Materialize Box) und kopieren Sie das in a neue benutzerdefinierte CSS-Datei, umbenennen den Selektor, so dass Sie es separat von Materialise/Kendo UI verwenden können?

Answer 3

Sie können das Stylesheet von Eighter Party manuell bearbeiten. Nehmen Sie den nicht-minimierte CSS und prepend jeden Basispfad mit einem kurzen Präfix:

.card { 
    .... 
} 

.mat.card { 
    .... 
} 

Auf diese Weise wird für jeden Stil materialisieren, die Sie verwenden .mat, bevor irgendetwas. Oder, wenn Sie hauptsächlich Materialize verwenden, machen Sie dasselbe für Kendo UI.

Dies ist eine Menge Schmerzen, aber würde Ihr Problem lösen.