Кнопки, связанные с пользовательским интерфейсом материала, со стилевым интерфейсом API MUI

Question

Мне нравится внешний вид Стилизованного компонента пользовательского интерфейса материала api ( не библиотека стилевых компонентов ), но я ' У меня проблемы с превращением моего простого компонента кнопки в связанную кнопку.

Как вставить ссылку activ-router-dom в кнопку «Компонент в стиле интерфейса пользователя»?

Ранее типичный подход Material UI HOC api позволял мне добавить связанную кнопку «отчеты» следующим образом. Он прекрасно работает, но требует гораздо больше шаблонного (не показано здесь):

<Button
  variant="contained"
  color="primary"
  className={classes.button}
  component={Link}
  to="/reports"
>
  <ShowChartIcon className={classes.buttonIcon} />
  Reports
</Button>

# 1 Очевидный подход: Когда я следую этому шаблону и включаю свойства component и to моего собственного компонента в стиле MUI с именем <MyButton>, я получаю ошибку машинописного текста, сообщающую, что эти свойства не не существует.

# 2 Другой подход: В соответствии с шаблоном, предложенным в этом материале UI GitHub выпуска , кнопка действительно ссылается на экран отчетов, но mui variant и color потеряны:

<MyButton
    variant="contained"
    color="primary"
    {...{
        component: Link,
        to: `/reports`
    } as any}
>
    <MyShowChartIcon />
    Reports
</MyButton>

# 3 Обходной подход: Менее желательный вариант - обернуть кнопку в <Link>. Это создает рабочую ссылку, но также вносит немного непреднамеренного стиля.

<Link to="/reports">
    <MyButton
        variant="contained"
        color="primary"
    >
        <MyShowChartIcon />
        Reports
    </MyButton>
</Link>

Answer 1

Используя последнюю версию material-ui (v4.0.2), вы можете использовать компонент HOC, созданный с помощью withStyles, но вам придется вручную привести пользовательский компонент к его первоначальному типу:

const MyButton = withStyles(
  createStyles({
    root: {
      color: 'red'
    }
  })
)(Button) as typeof Button

тогда вы можете использовать свой пользовательский компонент так же, как и оригинальный:

<MyButton component={Link} to="/blank-page">
  my button
</MyButton>

Вот рабочий пример: https://codesandbox.io/s/createreactappwithtypescript-n6wih

Я нашел это решение из этого комментария: https://github.com/mui-org/material-ui/issues/15695#issuecomment-498242520.