MaterialUI theme styling for nested classes

Question

I'm creating a theme for an app with createMuiTheme. I'm using material-table and I need to target to this icon of the column table header that is currently sorted:

Watching in developer tools it has the following CSS selectors:

.MuiTableSortLabel-root.MuiTableSortLabel-active.MuiTableSortLabel-root.MuiTableSortLabel-active .MuiTableSortLabel-icon {
    color: rgba(0, 0, 0, 0.54);
    opacity: 1;
}

How can i do that in the createMuiTheme object from this?

const theme = createMuiTheme({
    overrides : {
      MuiTableSortLabel: {
        root: {
          //i want to modify the icon color
          color: blue
        }
      }
    }
})

Answer 1

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"
          }
        }
      }
    }
  }
});

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