PowerShell Universal
DownloadsIssuesDiscordForums
v1
v1
  • About
  • Get Started
    • Additional Resources
    • Installation
      • Docker
      • Upgrading
    • Licensing
    • System Requirements
    • Supported Browsers
    • Visual Studio Code Extension
  • Cmdlet Help
  • Examples
    • Active Directory
    • Hyper-V
    • Image Processing
    • Monitoring
    • PowerShell Protect
    • Slack
    • SQL
  • API
    • About
    • Development
    • Endpoints
    • Security
    • Error Handling
    • Rate Limiting
  • Automation
    • About
    • Development
    • Scripts
      • Parameters
    • Jobs
    • Schedules
    • Triggers
    • Variables
  • Dashboard
    • About
    • Development
    • Dashboards
      • Migrating From Universal Dashboard 2.9
      • Building Dashboards
      • Custom Variable Scopes
    • Frameworks
    • Components
      • Pages
      • Dynamic Regions
      • Element
      • Error Boundary
      • HTML
      • Building Custom Components
      • Data Display
        • Alert
        • Chip
        • Date and Time
        • Icon
        • List
        • Table
        • Tree View
        • Typography
      • Data Visualization
        • Charts
        • Map
      • Feedback
        • Backdrop
        • Modal
        • Progress
        • Skeleton
      • Inputs
        • Autocomplete
        • Button
        • Checkbox
        • Code Editor
        • Date Picker
        • Floating Action Button
        • Form
        • Radio
        • Select
        • Slider
        • Switch
        • Textbox
        • Time Picker
        • Upload
      • Navigation
        • Drawer
        • Stepper
        • Tabs
      • Layout
        • Grid Layout
        • Grid
        • Hidden
      • Utilities
        • Transitions
      • Surfaces
        • AppBar
        • Card
        • Paper
        • Expansion Panel
    • Interaction
    • Published Folders
    • Themes
      • Cascading Style Sheets
      • Styles
    • Scheduled Endpoints
    • Role Based Access
    • Marketplace
  • Platform
    • Cache
    • Monitoring
  • Configuration
    • About
    • API
    • Environments
    • Hosting
      • IIS
      • Single-File
    • Login Page
    • Management API
    • Settings
    • Security
      • App Tokens
      • OpenID Connect
      • WS-Federation
    • Running as a Service Account
    • Git
  • Debugging
    • Logging
    • Debugging Scripts
  • Changelog
  • Extension Changelog
  • Legacy Universal Dashboard Docs
Powered by GitBook

PowerShell Universal

  • Downloads
  • Pricing
  • Gallery

Community

  • Issues
  • Forums
  • Discord

Support

  • Portal
  • Knowledgebase

Copyright 2025 Ironman Software

On this page
  • Applying a Style
  • Overriding Built in Styles

Was this helpful?

Edit on Git
Export as PDF
  1. Dashboard
  2. Themes

Styles

UDStyle component for Universal Dashboard

PreviousCascading Style SheetsNextScheduled Endpoints

Last updated 4 years ago

Was this helpful?

You can apply styles to individual components within Universal Dashboard by using the UDStyle component. This component will need to be added to your dashboard and is part of the core components included with PowerShell Universal.

Applying a Style

To apply a style to a component or a set of components, you call the New-UDStyle cmdlet, specify a CSS style and then include the components you wish to style within the -Content script block.

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

Overriding Built in Styles

When using a success alert, you will have the .MuiAlert-standardSuccess class applied to your component. You can override this default style like this.

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

The resulting alert will be red instead of the default green.

Each Material UI component has a set of built in classes that you can override using New-UDStyle. To determine the class names that you need to override, you can view the API documentation for the component you are trying to modify on the Material UI site. For example, here is a listing of the Alert component's CSS .

class names
UDStyled card
Alert with Red Background