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!

5

Do you know how I can make the chip to small size? And also change settings for the icon inside the chip? Size and color for the icon.

6

You can use the tables in the MUI docs to find the specific overrides to apply.

Something like this. Note, that I haven’t had to chance to actually apply this yet.

overrides = @{
         MuiChip= @{
		icon = @{
			'color' = 'red'
                        'fontSize' = '50px'
			}
		}
}
7

Can I just change the size for the chip and the icon will resize after that?
I have tried to re-size it with the link that you did post but I can’t do it I’m guessing that I’m just duing the size of it wrong.

8

I’m not quite sure. Can you provide a code snippet example for me to get started?

9

Here is my code that don’t working.


        MuiChip    = @{
            icon      = @{
                'color'    = '#FFFFFF'
                'fontSize' = '50px'
            }
            clickable = @{
                'background-color' = 'rgba(0, 151, 207, 0.6)'
                '&:hover'          = @{
                    color              = 'rgba(0, 151, 207, 0.6)'
                    'background-color' = 'rgba(80, 184, 72, 0.3)'
                }
            }
        }
10

Thanks!

11

Here is my code that don’t working.


        MuiChip    = @{
            icon      = @{
                'color'    = '#FFFFFF'
                'fontSize' = '50px'
            }
            clickable = @{
                'background-color' = 'rgba(0, 151, 207, 0.6)'
                '&:hover'          = @{
                    color              = 'rgba(0, 151, 207, 0.6)'
                    'background-color' = 'rgba(80, 184, 72, 0.3)'
                }
            }
        }

The colors are working but not the icon function

12

Ok, so I got the icons to work but the size of the chip are not “following” , is it possible to center the icon in the chip?
image

Code so far

        MuiChip   = @{
            icon      = @{
                color    = '#FFFFFF'
                fontSize = 'small'
            }
            clickable = @{
                'background-color' = 'rgba(0, 151, 207, 0.6)'
                '&:hover'          = @{
                    color              = 'rgba(0, 151, 207, 0.6)'
                    'background-color' = 'rgba(80, 184, 72, 0.3)'
                }
            }
        }
13

We have an (apparently, undocumented) component called New-UDIconButton. Is that the type of format you’re looking for?

14

It might be, I’ll take a look later but it sounds like it

15

Yes, that’s it. It was not much of documentation of it. Can I change the color of the icon and also the size of the button or are it done within the -icon () parameter?

16

So I got it to work, but I want it even smaller.
image

Today xs is the samlest is it possible to get it even smaller? I did use the following code:

New-UDIconButton -Icon (New-UDIcon -Icon play -Size 'xs' -Style @{ color = 'rgba(0, 151, 207, 0.6)' }) -Onclick {