使 MUI 对话框内容大小跟随内容的大小

Question

正如标题所示，

我想在页面加载时在对话框中显示 Youtube 视频，其中它会自动打开对话框并播放 Youtube 视频。所以我在这里为我的登陆页面准备了这个组件

// Main Application container
import React, { useState } from 'react';
import { BrowserRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
// Application routes
import AppRoutes from '../routes';
// YouTube component
import YouTube from 'react-youtube';
// Components
import HeadNav from '../components/header/Nav';
import Footer from '../components/footer/Footer';
import Grid from '@material-ui/core/Grid';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';

const styles = theme => ({
  videoadjust: {
    padding: 0 // To clear any unnecessary padding
  }
});

const App = (props) => {
  const { classes } = props;
  const [openDialog, setOpenDialog] = useState(true);

  return (
    <div>
      <Dialog onClose={() => setOpenDialog(false)} open={openDialog} fullWidth={ true } >
        <DialogContent className={classes.videoadjust} >
          <YouTube videoId='OPf0YbXqDm0' />
        </DialogContent>
      </Dialog>
      /* Some other contents in here*/
    </div>
  )
}

我使用状态挂钩并在初始化时将值设置为 true。问题是，对话框截断了 Youtube 视频，由于溢出而显示滚动条。检查 CSS 后，我可以看到对话框应用了一个固定宽度，该宽度小于视频宽度。

我希望对话框内容遵循放入其中的内容的大小，并且我不希望它触发溢出子句，在对话框的任何一侧显示滚动条。我怎样才能做到这一点？

Answer 1

您可以使用 maxWidth 属性更改 Dialog 的宽度。有 5 种不同的对话框宽度可供选择：xs、sm、md、lg、xl。

例如，

<Dialog onClose={() => setOpenDialog(false)} open={openDialog} fullWidth={ true } maxWidth={"md"}>

让我知道这是否有帮助