Stili

È possibile applicare stili ai singoli componenti all'interno delle app utilizzando il componente UDStyle. Questo componente dovrà essere aggiunto alla dashboard ed è parte dei componenti principali inclusi con PowerShell Universal.

Applicare uno stile

Per applicare uno stile a un componente o a un insieme di componenti, richiami il cmdlet New-UDStyle, specifichi uno stile CSS e includa i componenti a cui desidera applicare lo stile all'interno del blocco di script -Content.

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

Override degli stili integrati

Ogni componente Material UI dispone di un insieme di classi integrate che è possibile sovrascrivere utilizzando New-UDStyle. Per determinare i nomi delle classi da sovrascrivere, può consultare la documentazione API del componente che sta tentando di modificare sul sito di Material UI. Ad esempio, qui è riportato un elenco dei nomi delle classi CSS del componente Alert.

Quando utilizza un avviso di tipo success, al componente verrà applicata la classe .MuiAlert-standardSuccess. È possibile sovrascrivere questo stile predefinito in questo modo.

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

L'avviso risultante sarà rosso anziché verde predefinito.

Alert with Red Background