Stile

Sie können Stile auf einzelne Komponenten innerhalb von Apps anwenden, indem Sie die Komponente UDStyle verwenden. Diese Komponente muss zu Ihrem Dashboard hinzugefügt werden und ist Teil der Kernkomponenten, die in PowerShell Universal enthalten sind.

Einen Stil anwenden

Um einen Stil auf eine Komponente oder eine Reihe von Komponenten anzuwenden, rufen Sie das Cmdlet New-UDStyle auf, geben einen CSS-Stil an und fügen dann die Komponenten, die Sie gestalten möchten, innerhalb des Skriptblocks -Content ein.

New-UDStyle -Style '
    padding: 32px;
    background-color: hotpink;
    font-size: 24px;
    border-radius: 4px;
    &:hover {
      color: white;
    }
    .MuiCardHeader-root {
        background-color: green !important;   
    }
    .MuiCardContent-root {
        background-color: green !important;   
    }' -Content {
        New-UDCard -Title 'Test' -Content {
            "Hello"
        }
    }

UDStyled card

Integrierte Stile überschreiben

Jede Material UI-Komponente verfügt über eine Reihe integrierter Klassen, die Sie mit New-UDStyle überschreiben können. Um die Klassennamen zu bestimmen, die Sie überschreiben müssen, können Sie die API-Dokumentation für die Komponente, die Sie ändern möchten, auf der Material UI-Website einsehen. Hier ist zum Beispiel eine Auflistung der CSS-Klassennamen der Alert-Komponente.

Wenn Sie eine Erfolgsmeldung (success alert) verwenden, wird die Klasse .MuiAlert-standardSuccess auf Ihre Komponente angewendet. Sie können diesen Standardstil wie folgt überschreiben.

New-UDStyle -Style '.MuiAlert-standardSuccess { background-color: red !important;  }  ' -Content {
    New-UDAlert -Text "Hello"
}

Die resultierende Meldung wird rot statt des standardmäßigen Grüns sein.

Alert with Red Background