[英]How to compose Material UI components with React and Typescript?
I would like to create an extension of a component from the Material UI library. 我想从Material UI库创建组件的扩展。 For example, I am always adding styles to the wrapper in a modal, so I would like to create a custom component encapsulating those styles. 例如,我总是以样式方式向包装器中添加样式,因此我想创建一个封装这些样式的自定义组件。
I've found the following solution that "works" but I feel like the props interface is a bit of a hack. 我发现以下解决方案“可行”,但我觉得道具界面有点破烂。 Is there a better way to do this? 有一个更好的方法吗? Specifically, what is the best way to merge the classes
prop from the original <Modal>
component with the classes from my custom styles
object? 具体来说,将原始<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);
You can use className on a material UI component. 您可以在材质UI组件上使用className。
IE IE浏览器
<Typography className="large-text">
LORE IPSUM large
</Typography>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.