Насколько надежны имена MUI Global Class в JSS? - PullRequest
Новая
       52

Насколько надежны имена MUI Global Class в JSS?

2 голосов
/ 17 марта 2020

У меня есть такой код: 

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

     }
  }
}

Безопасно ли использовать имя класса в переопределениях тем для доступа к другим компонентам? Кроме того, существует ли JSS способ вложения стилей из других компонентов?

1 Ответ

2 голосов
/ 17 марта 2020

Это довольно безопасно, но с одной оговоркой. Если вы используете вложенные темы, глобальные имена классов, применяемые во вложенной теме, будут иметь непредсказуемый суффикс (например, 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>
  );
}

Edit Global class names

...