column header sorting icon props?

[davidloh85]

I understand that muiColumnActionsButtonProps allows me to modify the icon props for the column options,

may I know which props allow me to modify the sorting icon on the column header cell?

I only wish to change the color of the icon.

[davidloh85]

this has been resolved.

[xandraCS]

How did you do this? Looking to do the same thing

[davidloh85]

my approach was simplier; I created a muiThemeProvider; the secondary color affects the icon colors.

[xandraCS]

For anyone else curious, I ended up adding this to my sass:

.MuiTableSortLabel-icon.MuiSvgIcon-root.MuiTableSortLabel-iconDirection
    &Desc,&Asc
        color: white !important`

[mauro-rogledi]

I don't want to use sass and the color must not be white, but vary depending on the theme and darkmode.
Is there no property to change this color?

[KevinVandy]

Well you don't need to use SASS. Just use the sx prop like normal

muiTableHeadCellProps: ({ column }) => ({
  sx: {
    '& .MuiTableSortLabel-icon': {
      color: column.getIsSorted() ? 'limegreen !important' : undefined,
    },
  },
})

[KevinVandy]

There seems to not be not knowledge on how to style nested elements with Emotion. You can target css classes in the sx prop.

For example,

muiTableHeadCellProps: ({ column }) => ({
  sx: {
    '& .MuiTableSortLabel-icon': {
      color: column.getIsSorted() ? 'limegreen !important' : undefined,
    },
  },
})

[mauro-rogledi]

Ok, for the default icon (up and down arrow) it works.
But when the table shows up or down arrow, the color changes to black again.

Founded:

				"&.muitablesortlabel-root": {
					color: "white",
				},

[KevinVandy]

yeah in my example that's what I wanted. Of course, adjust the logic to fit your needs