Question

在我的对话框中，我想显示2个差异组件。因此，有我的Dialog组件，我传递的内容具有“儿童”道具。

因为我的组件之一需要显示得较宽，而另一部分则需要显示得不那么宽。我通过“ fullWidth”道具，取决于显示的组件。

import React from "react";
import "./style.scss";
import Dialog from "@material-ui/core/Dialog";
import DialogContent from "@material-ui/core/DialogContent";
import { withStyles } from "@material-ui/core";

const styles = {
  "-webkit-transition": "all 1s ease",
  " -moz-transition": "all 1s ease",
  "-o-transition": "all 1s ease",
  " -ms-transition": "all 1s ease",
  transition: "all 1s ease"
};

const ModalExpensive = props => {
  return (
    <Dialog
      open={props.open}
      onClose={props.onClose}
      fullWidth={props.fullWidth}
      maxWidth={"xl"}
      classes={props.classes}
    >
      <DialogContent>{props.children}</DialogContent>
    </Dialog>
  );
};

export default withStyles(styles)(ModalExpensive);

这还可以。组件的显示效果取决于我执行的操作，对话框的尺寸调整得很好

但是问题是，当内容从稀薄变到宽或从宽变薄时，我想进行平滑的调整大小（宽度）转换。

我尝试将一类包含CSS的东西放进去。没用我尝试使用withStyle。没用

这是唯一可能吗？我究竟做错了什么？谢谢

编辑：当我说“平滑调整大小”时，我的意思是CSS过渡，例如：https://codepen.io/grayghostvisuals/pen/joniB

使用Material ui对话框进行平滑过渡

0 个答案: