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"}>

让我知道这是否有帮助

使MUI对话框的内容大小遵循内容的大小

1 个答案: