Hojas de estilo en cascada

Puede usar una hoja de estilos en cascada (CSS) añadiendo un fichero .css a una carpeta publicada y pasándolo después al parámetro -Stylesheets de New-UDDashboard.

Por ejemplo, el fichero dashboard.ps1 tendría este aspecto.

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


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

A continuación, podría configurar una carpeta publicada para proporcionar la ruta de los recursos. Este es el aspecto que tendrá el contenido de publishedFolders.ps1.

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

Dentro de la carpeta C:\assets, puede colocar cualquier recurso al que desee acceder en la ruta /assets.

Assets folder

Después puede crear una hoja de estilos para manipular la parte del panel que desee.

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

Esto produce un panel con una imagen de fondo de Austin, el perro, durmiendo en un montón de tierra.

Determinar los nombres de clase correctos

Cada componente de Material UI tiene una serie de nombres de clase globales que puede usar para aplicar estilos en todo su panel. Para determinar los nombres de clase correctos, puede consultar la documentación de la API de un componente concreto. Allí hay una lista de los nombres de clase globales que se aplican a ese componente.

Por ejemplo, aquí está la documentación CSS del componente Alert.

Dentro de su fichero CSS, puede usar estos nombres de clase para sobrescribir estilos en todo su panel. Si quisiera que todas las alertas de éxito tuvieran un fondo rojo, podría crear un fichero CSS como este.

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