import { Button, DialogTitle, Grid, IconButton, Dialog, DialogContent } from "@material-ui/core";
import React from "react";
import SharedFileList from "./SharedFileList";
import CloseIcon from '@material-ui/icons/Close';
import { createStyles, WithStyles, withStyles } from "@material-ui/styles";
interface Props {
open: boolean
handleOpen: () => void
handleClose: () => void
}
const style = createStyles({
root: {
minHeight: 568
}
})
type myProps = Props & WithStyles<typeof style>
class Dialog23 extends React.Component<myProps> {
render() {
return (
<div>
<Button onClick={this.props.handleOpen}>点击</Button>
<Dialog open={this.props.open} fullWidth>
<DialogTitle >
<Grid container spacing={24} direction="row"
justify="space-between"
alignItems="center">
<Grid item xs={9}>
共享文件
</Grid>
<Grid item xs={1}>
<IconButton>
<CloseIcon onClick={this.props.handleClose} />
</IconButton>
</Grid>
</Grid>
</DialogTitle>
<DialogContent>
<SharedFileList
className={this.props.classes.root}
groupID={""}
files={[]}
onSharedFilesDirty={() => { }}
/>
</DialogContent>
</Dialog>
</div>
)
}
}
export default withStyles(style)(Dialog23);
withStyle:生成一个高阶组件，将属性传递给接收组件；同时删除被传递组件所需的该属性，剩下其他所需属性由调用该组件的父组件继续提供。
例：
组件1<WithStyles<typeof styles>（样式），属性2>
↓
export default withStyles(styles)(组件1);
↓
组件1<属性2>
使用：
className={this.props.classes.root}
