Estoy tratando de cambiar el color predeterminado de ArrowDownIcon en TableCell usando una temática global como esta:
MuiTableSortLabel: { styleOverrides: { root: { '&&.MuiTableSortLabel-icon':{ color:'#fff' }, '&.Mui-active': { color: '#787878 !important', '&&.MuiTableSortLabel-icon': { color: '#fff' } }, '&&.MuiButtonBase-root': { '&&.Mui-active': { color: '#fff' } } }, } }El problema es que la clase de icono adquiere otra clase como esta: [1]: https://i.stack.imgur.com/lhYW4.png , así que probé este enfoque para anularlo, simplemente no funcionó:
MuiButtonBase: { styleOverrides: { root: { '&&.Mui-active': { color: '#fff !important', '&&.MuiTableSortLabel-icon':{ color:'#fff' } }, '&&.MuiTableSortLabel-root': { '&&.Mui-active' : { '&&.MuiTableSortLabel-icon':{ color: '#fff', } }, } } }, },¿Alguna idea de como resolver esto? agradezco cualquier aporte :)
La respuesta corta a tu pregunta es:
MuiTableSortLabel: { styleOverrides: { root: { "&.Mui-active .MuiTableSortLabel-icon": { color: "red", }, }, }, },La respuesta larga es que parece que tienes un malentendido sobre cómo funciona el "&". El "&" se denomina selector de anidamiento y representa el elemento que coincide con la regla principal. La mejor manera de solidificar esa afirmación es probablemente con una serie de ejemplos.
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-rootEntonces, podrías preguntarte ¿en qué resulta lo siguiente?
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-iconObserve cómo el uso anidado de "&" cambia para convertirse en ".MuiActive" porque esa es la nueva regla principal. Y la duplicación de & da como resultado la duplicación .Mui-active también.
Si prefiere el selector anidado como el que tiene en su pregunta original, lo siguiente también funcionará. El anidamiento depende completamente de las preferencias de su desarrollador.
MuiTableSortLabel: { styleOverrides: { root: { "&.Mui-active": { // the leading space is important for this to correctly target the child element " .MuiTableSortLabel-icon": { color: "red", }, }, }, }, },