score:4

Accepted answer

when you are uncertain how to override the default styles, the best resource is to look at how the default styles are defined. the browser developer tools will show you the end result, and the source code will show you the approach to use to generate css with similar specificity.

below is the relevant code from tablesortlabel that controls the icon color:

export const styles = theme => ({
  /* styles applied to the root element. */
  root: {
    '&$active': {
      // && instead of & is a workaround for https://github.com/cssinjs/jss/issues/1045
      '&& $icon': {
        opacity: 1,
        color: theme.palette.text.secondary,
      },
    },
  }
});

you can use very similar syntax for the theme override:

const theme = createmuitheme({
  overrides: {
    muitablesortlabel: {
      root: {
        "&$active": {
          "&& $icon": {
            color: "blue"
          }
        }
      }
    }
  }
});

edit tablesortlabel icon color theme override

relevant jss documentation: https://cssinjs.org/jss-plugin-nested/?v=v10.0.3#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet


Related Query

More Query from same tag