如何使用 React 和 Typescript 组合 Material UI 组件？答案

【问题标题】：How to compose Material UI components with React and Typescript?如何使用 React 和 Typescript 组合 Material UI 组件？
【发布时间】：2018-07-20 11:56:49
【问题描述】：

我想从Material UI 库中创建一个组件的扩展。例如，我总是在模式中向包装器添加样式，所以我想创建一个自定义组件来封装这些样式。

我找到了以下“有效”的解决方案，但我觉得道具界面有点像黑客。有一个更好的方法吗？具体来说，将原始 <Modal> 组件中的 classes 属性与我的自定义 styles 对象中的类合并的最佳方法是什么？

import { Modal, WithStyles, createStyles, withStyles } from '@material-ui/core';
import { ModalClassKey, ModalProps } from '@material-ui/core/Modal';
import * as React from 'react';

interface IProps
  extends WithStyles<typeof styles | ModalClassKey>,
    Omit<ModalProps, 'classes'> {}

const styles = createStyles({
  modal: {
    // Some styles to apply to the modal content
  },
});

const MyModal: React.SFC<IProps> = ({ children, classes, ...props }) => (
  <Modal {...props}>
    <div className={classes.modal}>
      {children}
    </div>
  </Modal>
);

export default withStyles(styles)(MyModal);

【问题讨论】：

标签： reactjs typescript material-ui

【解决方案1】：

您可以在材质 UI 组件上使用 className。

I.E

<Typography className="large-text">
LORE IPSUM large
</Typography>

【讨论】：

这不能回答我的问题。我的问题是关于将接口属性与 Typescript 合并或解决该问题的方法。如果你能解释这个答案是如何解决这个问题的，我愿意考虑。