React之CSS in JS

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>

扫描二维码关注公众号，回复： 9812810 查看本文章

使用：

className={this.props.classes.root}