Интерполяция глобальных стилей для вложенных компонентов в Material-UI с использованием TypeScript - PullRequest
Новая
       18

Интерполяция глобальных стилей для вложенных компонентов в Material-UI с использованием TypeScript

0 голосов
/ 22 апреля 2020

Я пытаюсь выяснить, как передать стили по цепочке компонентов, и у меня возникают некоторые ошибки ESLint.

Component.tsx: 

const useStyles = makeStyles((theme: Theme) => createStyles({
  nestedStyle: {
    padding: 0,
  },
}));

...

const classes = useStyles({ classes: useGlobalStyles() });

...

<Typography className={classes.parentStyle}> // <--ESLint Error
  TEST
</Typography>

useGlobalStyles.tsx: 

const useGlobalStyles = makeStyles(
  (theme: Theme) => createStyles({
    parentStyle: {
      fontFamily: 'Roboto Mono',
    },
  }),
);

Примечание: я знаю, что мое использование useGlobalStyles() здесь странно, но в настоящее время это необходимо и в конечном итоге будет заменено соглашением о пропил-бурении: https://material-ui.com/styles/advanced/#makestyles

classes.parentStyle работает здесь во время выполнения и передает правильный стиль в элемент Typography. Проблема в том, что ESLint жалуется, потому что, насколько известно TypeScript, parentStyle не существует на classes.

Можно ли пересечь возвращаемые значения useStyles() и useGlobalStyles(), чтобы получить допустимый объект TypeScript?

...