How reliable are MUI Global Class names in JSS?

Question

I have code like this:

const formControlStyles = {
  root: {
    '&:hover .MuiFormLabel-root': {

     }
  }
}

Is it safe to use the class name in theme overrides to access other components? Additionally, is there a JSS way of nesting styles from other components?

Menefee

Answer 1

UPDATE for v5 This answer was originally written regarding v4 of Material-UI. In v5, the global class names are no longer used by Material-UI to apply the default styles -- the classes used for the default styles have class names generated by Emotion. The global class names are still applied, but they are no longer impacted by nested themes, so in v5 it is completely safe to leverage the global class names for overrides without needing to use the [class*=... syntax mentioned in my original answer below.

---

It is fairly safe to use global class names, but with one caveat (in v4). If you leverage nested themes, the global class names applied within the nested theme will have an unpredictable suffix (e.g. MuiFormLabel-root-371). This suffixing is necessary, because the default styles associated with a nested theme can be different.

In order to target the class names in a completely safe manner, you can use the *= attribute selector (e.g. [class*="MuiFormLabel-root"]) which checks to see if the element has a class name that contains MuiFormLabel-root rather than needing to match it exactly. You can see this approach used within Material-UI itself here.

So long as you don't intend on using nested themes, it is safe (and much more readable) to use the simpler syntax of matching the global class names exactly. An alternative approach is to specify a JSS class on the nested component and refer to that class using the JSS syntax for referring to another rule in the same stylesheet (e.g. $myFormLabel in my example), but this requires being able to apply that class (e.g. classes.myFormLabel in my example) to the nested component.

Below is an example which demonstrates the issue (and some possible solutions) when using nested themes.

import React from "react";
import {
  ThemeProvider,
  createMuiTheme,
  makeStyles
} from "@material-ui/core/styles";
import FormLabel from "@material-ui/core/FormLabel";

const theme1 = createMuiTheme();
const theme2 = createMuiTheme({
  overrides: {
    MuiFormLabel: {
      root: {
        color: "#00ff00"
      }
    }
  }
});

const useStyles = makeStyles({
  mostlySafe: {
    "&:hover .MuiFormLabel-root": {
      color: "red"
    }
  },
  safeButTediousAndMoreErrorProneSyntax: {
    '&:hover [class*="MuiFormLabel-root"]': {
      color: "purple"
    }
  },
  alternativeApproach: {
    "&:hover $myFormLabel": {
      color: "blue"
    }
  },
  myFormLabel: {}
});
export default function App() {
  const classes = useStyles();
  return (
    <ThemeProvider theme={theme1}>
      <div>
        <div className={classes.mostlySafe}>
          <FormLabel>FormLabel within top-level theme</FormLabel>
        </div>
        <ThemeProvider theme={theme2}>
          <div className={classes.mostlySafe}>
            <FormLabel>
              FormLabel within nested theme (hover styling doesn't work)
            </FormLabel>
          </div>
          <div className={classes.safeButTediousAndMoreErrorProneSyntax}>
            <FormLabel>
              FormLabel within nested theme using safe approach
            </FormLabel>
          </div>
          <div className={classes.alternativeApproach}>
            <FormLabel className={classes.myFormLabel}>
              FormLabel within nested theme without using global class names
            </FormLabel>
          </div>
        </ThemeProvider>
      </div>
    </ThemeProvider>
  );
}

Lamprey

Thank you for the help! One question that stuck with me after your answer (specifically MUI's AutoComplete component implementation). What happens if disableGlobal is set to true? Will Autocomplete component break? Will styles be inaccessible? – Menefee

@Menefee That's an interesting point. Yes, if disableGlobal is set to true, that will break the Autocomplete styling. In v5, the plan is to replace JSS with styled-components as the styling solution used internally. I don't know what all the implications of that will be yet, but I suspect that MUI will become more reliant on the global class names, not less. I suspect the option to disableGlobal will completely go away. – Lamprey

@Menefee FYI -- here's the code reference for where disableGlobal comes into play: github.com/mui-org/material-ui/blob/v4.9.5/packages/…. – Lamprey