Setting CSS class css-<Something>-MuiFormControl-root

PowerShell Universal
1 
Product: PowerShell Universal
Version: 4.0.8

Greetings,

I am trying to style a New-UDSelect cmdlet inside a New-UDElement cmdlet.

My Code:

New-UDStack -id StackElement -Direction column -Content {
        New-UDSelect -Id "FirstSelectID" -Label "Company Name" -Option {
            New-UDSelectGroup -Name "Select a Number" -Option {
                New-UDSelectOption -Name "one" -Value "one"
                New-UDSelectOption -Name "two" -Value "two"
            }
        }

        New-UDElement -ClassName ElementClass -Id "ElementID" -Tag div -Endpoint {
            New-UDSelect -classname SecondSelectClass -Id "SecondSelectID" -Label "Environment" -Option {
                New-UDSelectOption -Name "one" -Value "one"
                New-UDSelectOption -Name "two" -Value "two"
            }
        }
}

When I lay out the code, the second Select box does not behave like the first select box:
2023-07-31 15_30_34-PowerShell Universal — Mozilla Firefox

When looking at the code I have identified the class which is causing this however, I can not see a way to modify it:

2023-07-31 14_43_23-Developer Tools — PowerShell Universal — http___localhost_5000_envdev_Home
2023-07-31 14_43_23-Developer Tools — PowerShell Universal — http___localhost_5000_envdev_Home968×147 11.7 KB

The other problem is that the class css-pe0pe4-MuiFormControl-root appears to rename itself, which means whenever a change is made.

Does anyone have any ideas how i can set a value to a property under this style?

I have attempted wrapping a New-UDForm around this, however this does now allow me to set a static class name.

2

What happens if you put -FullWidth on the UDSelect?

The css class being generated is based on styles directly in the component so that’s why it changes dynamically.

1 Like
3

Hi @adam,

I have spun up a container to test that and it appears to work :slight_smile:

When I get to the office in the morning, I will test that out on my dev environment.

Is it a general rule of thumb where if I see a randomly named CSS Stylesheet that will be a cmdlet parameter for a child DIV tag or do other parts of the stack do the same thing?

Thanks again,
Matt.