Überschreiben einer existierenden Komponente

Owned by Christopher Holden
Last updated: März 11, 2024 by Sebastian Schulz
2 min read

Neben der Möglichkeit in einem Styleguide neue Komponenten und Elemente erstellen zu können, dürfen auch bereits bestehende Komponenten überschrieben werden. Hierbei kann eine Überschreibung nur das Layout oder auch die Vorlagendefinition betreffen. Bei der Überschreibung einer Vorlagendefinition ist zu beachten, dass damit die Komponente oder das Element in allen installierten Styleguides, auch außerhalb der Abhängigkeitskette, verändert wird. Eine Überschreibung der Vorlagendefinition sollte daher vermieden werden. In diesem Tutorial wird im custom-styleguide die Komponente framework-button überschrieben, wobei custom-styleguide selbst auf admin-styleguide basiert.

Dateistruktur

Damit eine existierende Komponente überschrieben werden kann, muss die Ordner- und Dateistruktur aus dem definierenden Styleguide nachempfunden werden. In unserem Beispiel befindet sich die Komponente framework-button im Styleguide framework-styleguide innerhalb des component-Ordners, dadurch ergibt sich in unserem Styleguide custom-styleguide die folgende Ordnerstruktur:



  • custom-styleguide

    • component

      • framework-button



Die nachfolgenden Punkte beschreiben verschiedene Wege für die Überschreibung einer Komponente, welche jeweils unterschiedliche Dateien im soeben erstellten Ordner benötigen.

Variablenüberschreibung

In vielen Fällen reicht die Überschreibung der SCSS-Variablen einer bestehenden Komponente aus. Hierfür muss im zuvor erstellten Ordner die Datei _override.scss erstellt werden. Die Komponente framework-button besitzt im admin-styleguide die SCSS-Variable $admin-framework-button-height mit dem Standardwert von 35px. Wir werden diesen Standardwert nun in 64px ändern. Das Kennzeichen !default wird auch bei einer Überschreibung beibehalten, da diese Variablen ebenfalls überschrieben werden können.

/* _override.scss */ $admin-framework-button-height: 64px !default;



In den _override.scss-Dateien stehen keine SCSS-Variablen aus der _default.scss der originalen Komponenten zur Verfügung.

Layoutüberschreibung

Neben der Überschreibung von SCSS-Variablen kann auch das Layout einer Komponente überschrieben werden. Hierbei kann das Layout komplett ersetzt oder erweitert werden. Es beiden Fällen muss die Datei _layout.scss im zuvor erstellen Ordner angelegt werden.

/* _layout.scss */ /** * Wird das Layout nur erweitert und nicht komplett überschrieben, muss das originale Layout eingebunden werden. */ @import "../../../admin-styleguide/component/framework-button/layout"; /** * In beiden Fällen dürfen CSS-Selektoren mit Layouts geschrieben werden. */ .framework-button--standard { border-radius: 32px; }

Vorlagenüberschreibung

Neben dem Layout kann auch die Vorlagendefinition überschrieben werden. Hierbei muss die Datei für den Handlebars-Code erstellt werden. In unserem Beispiel ist das framework-button.hbs im zuvor erstellten Ordner.

<!-- framework-button.hbs --> {{#> framework-element this }} <!-- Der neue Code für "framework-button" --> {{/framework-element}}