Насколько надежны имена глобальных классов MUI в JSS?

Это довольно безопасно, но с одной оговоркой. Если вы используете вложенные темы, имена глобальных классов, применяемые во вложенной теме, будут иметь непредсказуемый суффикс (например, MuiFormLabel-root-371). Этот суффикс необходим, потому что стили по умолчанию, связанные с вложенной темой, могут быть разными.

Чтобы полностью безопасно настроить таргетинг на имена классов, вы можете использовать *= селектор атрибутов (например, [class*="MuiFormLabel-root"]), который проверяет, имеет ли элемент имя класса, которое содержит MuiFormLabel-root, вместо того, чтобы точно соответствовать ему. Вы можете увидеть этот подход, используемый в самом Material-UI здесь.

Пока вы не собираетесь использовать вложенные темы, безопасно (и гораздо более читабельно) использовать более простой синтаксис точного сопоставления имен глобальных классов. Альтернативный подход - указать класс JSS для вложенного компонента и обратиться к этому классу с использованием синтаксиса JSS для ссылка на другое правило в той же таблице стилей (например, $myFormLabel в моем примере), но для этого требуется возможность применить этот класс (например, classes.myFormLabel в моем примере) к вложенному компоненту.

Ниже приведен пример, демонстрирующий проблему (и некоторые возможные решения) при использовании вложенных тем.

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