Feuilles de style en cascade

Vous pouvez utiliser une feuille de style en cascade (CSS) en ajoutant un fichier .css à un dossier publié, puis en le passant au paramètre -Stylesheets de New-UDDashboard.

Par exemple, le fichier dashboard.ps1 ressemblerait à ceci.

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


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

Vous pourriez ensuite configurer un dossier publié pour fournir la route assets. Voici à quoi ressemblera le contenu de publishedFolders.ps1.

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

Dans le dossier C:\assets, vous pouvez placer tous les actifs auxquels vous souhaitez accéder sur la route /assets.

Dossier des actifs

Vous pouvez ensuite créer une feuille de style pour manipuler la portion du tableau de bord que vous souhaitez.

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

Cela produit un tableau de bord avec une image de fond d'Austin le chien qui dort dans un tas de terre.

Déterminer les noms de classe corrects

Chaque composant Material UI possède une série de noms de classe globaux que vous pouvez utiliser pour appliquer des styles dans l'ensemble de votre tableau de bord. Pour déterminer les noms de classe corrects, vous pouvez consulter la documentation de l'API d'un composant particulier. On y trouve une liste des noms de classe globaux qui s'appliquent à ce composant.

Par exemple, voici la documentation CSS du composant Alert.

Dans votre fichier CSS, vous pouvez utiliser ces noms de classe pour remplacer les styles dans l'ensemble de votre tableau de bord. Si vous souhaitiez donner un arrière-plan rouge à toutes les alertes de succès, vous pourriez créer un fichier CSS comme celui-ci.

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