Alternating table row colors with light/dark theme via MUI overrides?

Hi folks,

Just trying to add some readability to larger tables via the colour theme, in adding alternating (striped) colours on odd table row numbers only.

I know this is achievable via CSS, using tr:nth-child(odd) but I’ve been trying to get it to work using the theme overrides in Mui without much success, since we’ve got light/dark mode enabled in the theme. Is it possible to do via PSU’s MUI theming implementation? I haven’t had much luck with poking at the MuiTable classes :grimacing:

Product: PowerShell Universal
Version: 3.7.5



$Theme = @{
    overrides = @{
        MuiTableRow = @{
            root = @{
                '&:nth-of-type(odd)' = @{
                    backgroundColor = "rgba(0,0,0,0.04)"
            head = @{
                backgroundColor = "rgb(255,255,255) !important"

New-UDDashboard -Content {
$data = 1..10 | % { [PSCustomObject]@{ Item = $_}}
  New-UDTable -Id "LockedUsers" -ShowPagination -PageSize 10 -PageSizeOptions @(10, 10) -DisablePageSizeAll -Columns @(
        New-UDTableColumn -Property 'Item' -Title 'Item' -Width 180 -Truncate
    ) -Data $Data -Dense -ShowSearch
} -Theme $Theme

Yes! I got here as well since posting. I just need to account for expanding rows since they also apparently count as rows :joy:

1 Like