MUI Theme - Button Hover

PowerShell Universal Universal Dashboard
#1 
Product: PowerShell Universal
Version: 2.5.5

Hey everyone,

I’m building my first theme and using the Material UI $theme hash table, along with -Theme parameter for New-UDDashboard. Reference: https://docs.powershelluniversal.com/userinterfaces/dashboards/themes#onepirate

I’m using a dark color in my side navigation, and would like to adjust the button :hover state. Currently you can barely notice the hover, so I’d like to adjust the transparency a bit to make it more noticeable.

I know I can use CSS for this, but want to stick to the MUI Theming as much as possible.

I’ve tried multiple ways of trying to get .MuiListItem-button:hover working in the MUI $theme hash table, but no go. How can I get this in the $theme hash table to adjust the background-color?

2021-12-07_7-48-31

Thanks,
Rob

#2

This is how I did the hover adjustments for MuiButton and MuiChip. Hopefully, this helps.

        overrides = @{
            MuiButton = @{
                contained = @{
                    'background-color' = $BackgroundColor
                    color              = '#FFFFFF'
                    '&:hover'          = @{
                        'background-color' = $HoverColor
                    }
                }
            }
            MuiChip   = @{
                clickable = @{
                    'background-color' = '#FFFFFF'
                    '&:hover'          = @{
                        color = '#FFFFFF'
                        'background-color' = $HoverColor
                    }
                }
            }
         }
#3

Thanks @dbytes, that helped a bit.

Trial and error, eventually got it figured out. The class is .MuiListItem-button with an action of hover. I found the syntax to be …

overrides = @{
	MuiListItem = @{
		button = @{
			'&:hover' = @{backgroundColor = 'rgba(0, 0, 0, 0.3)'}
			}
		}# MuiListItem
}# overrides

Had to take out the “-” and move “button” down to a sub element, then put hover in there. Works great!

#4

Sorry, I should have mentioned that you would separate after the dash. Glad you got it!