Размер диалогового окна MUI должен соответствовать размеру содержимого - PullRequest
Новая
       7

Размер диалогового окна MUI должен соответствовать размеру содержимого

0 голосов
/ 17 марта 2019

Как указано,

Я хочу показать видео 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 я вижу, что к диалогу применена установленная фиксированная ширина, которая меньше ширины видео.

Я хочу, чтобы содержимое диалога соответствовало размеру содержимого, помещенного в него, и я не хочу, чтобы оно вызывало условие переполнения, показывая полосу прокрутки с любой стороны диалогового окна. Как мне этого добиться?

1 Ответ

0 голосов
/ 18 марта 2019

Вы можете изменить ширину диалога, используя атрибуты maxWidth. Вы можете выбрать один из 5 вариантов ширины диалогов: xs, sm, md, lg, xl.

Например, 

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

Дайте мне знать, если это полезно

...