如何用React和Typescript组成Material UI组件？

Question

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

我发现以下解决方案“可行”，但我觉得道具界面有点破烂。 有一个更好的方法吗？ 具体来说，将原始<Modal>组件中的classes prop与我的自定义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);

Answer 1

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

IE浏览器

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