Cascading Style Sheets

Sie können ein Cascading Style Sheet (CSS) verwenden, indem Sie eine .css-Datei zu einem veröffentlichten Ordner hinzufügen und sie dann an den Parameter -Stylesheets von New-UDDashboard übergeben.

Die Datei dashboard.ps1 würde beispielsweise so aussehen.

New-UDDashboard -Title "Server Monitor" -Content {


} -Stylesheets @("/assets/theme.css")

Anschließend könnten Sie einen veröffentlichten Ordner einrichten, um die Route assets bereitzustellen. So sieht der Inhalt von publishedFolders.ps1 aus.

New-PSUPublishedFolder -RequestPath "/assets" -Path "C:\assets"

Innerhalb des Ordners C:\assets können Sie beliebige Assets ablegen, auf die Sie über die Route /assets zugreifen möchten.

Assets-Ordner

Anschließend können Sie ein Stylesheet erstellen, um einen beliebigen Teil des Dashboards zu bearbeiten.

.ud-dashboard > div {
    background-image: url("/assets/image.jpeg");
}

Dies erzeugt ein Dashboard mit einem Hintergrundbild des Hundes Austin, der in einem Haufen Erde schläft.

Die richtigen Klassennamen ermitteln

Jede Material UI-Komponente verfügt über eine Reihe globaler Klassennamen, mit denen Sie Stile im gesamten Dashboard anwenden können. Um die richtigen Klassennamen zu ermitteln, können Sie die API-Dokumentation einer bestimmten Komponente ansehen. Dort finden Sie eine Liste der globalen Klassennamen, die für diese Komponente gelten.

Hier ist beispielsweise die CSS-Dokumentation für die Alert-Komponente.

In Ihrer CSS-Datei können Sie diese Klassennamen verwenden, um Stile im gesamten Dashboard zu überschreiben. Wenn Sie möchten, dass alle Erfolgsmeldungen einen roten Hintergrund haben, könnten Sie eine CSS-Datei wie diese erstellen.

.MuiAlert-standardSuccess { background-color: red !important;  }