i am trying to change the default color of the ArrowDownIcon in a TableCell using global theming like this:
MuiTableSortLabel: {
styleOverrides: {
root: {
'&&.MuiTableSortLabel-icon':{
color:'#fff'
},
'&.Mui-active': {
color: '#787878 !important',
'&&.MuiTableSortLabel-icon': {
color: '#fff'
}
},
'&&.MuiButtonBase-root': {
'&&.Mui-active': {
color: '#fff'
}
}
},
}
}
Problem is, the icon class adquires another class like this: [1]: https://i.stack.imgur.com/lhYW4.png so i tried this approach to override it, just did not work out:
MuiButtonBase: {
styleOverrides: {
root: {
'&&.Mui-active': {
color: '#fff !important',
'&&.MuiTableSortLabel-icon':{
color:'#fff'
}
},
'&&.MuiTableSortLabel-root': {
'&&.Mui-active' : {
'&&.MuiTableSortLabel-icon':{
color: '#fff',
}
},
}
}
},
},
any idea how to solve this? appreciate any input :)
The short answer to your question is:
MuiTableSortLabel: {
styleOverrides: {
root: {
"&.Mui-active .MuiTableSortLabel-icon": {
color: "red",
},
},
},
},
The long answer is that it appears that you have a misunderstanding of how the "&" works. The "&" is called the nesting selector, and it represents the element matched by the parent rule. The best way to solidify that statement is probably with a series of examples.
MuiTableSortLabel: {
styleOverrides: {
root: {
"&": { color: "red" },
"&&": { color: "red" },
},
},
},
// "&" results in a selector of
.css-1k750gi-MuiButtonBase-root-MuiTableSortLabel-root
// "&&" results in the selector duplicating (increasing specificity)
.css-1r3m9rx-MuiButtonBase-root-MuiTableSortLabel-root.css-1r3m9rx-MuiButtonBase-root-MuiTableSortLabel-root
So then you might ask what does the following result in?
MuiTableSortLabel: {
styleOverrides: {
root: {
'&.Mui-active': {
color: '#787878 !important',
'&&.MuiTableSortLabel-icon': {
color: '#fff'
}
},
},
},
},
// &.Mui-active becomes the following:
.css-1k750gi-MuiButtonBase-root-MuiTableSortLabel-root.Mui-active
// the nested "&&.MuiTableSortLabel-icon" then does the following
.css-1k750gi-MuiButtonBase-root-MuiTableSortLabel-root.Mui-active.Mui-active.Mui-active.MuiTableSortLabel-icon
Note how the nested usage of "&" changes to become ".MuiActive" because that is the new parent rule. And duplicating the & results in .Mui-active duplicating as well.
If you prefer the nested selector like you have in your original question, the following will also work. The nesting is completely up to your developer preference.
MuiTableSortLabel: {
styleOverrides: {
root: {
"&.Mui-active": {
// the leading space is important for this to correctly target the child element
" .MuiTableSortLabel-icon": {
color: "red",
},
},
},
},
},