Диалоговое окно Javascript пользовательского интерфейса материала увеличивает ширину

Question 1

Я использую диалог из пользовательского интерфейса material с react js и хочу увеличить его ширину. Я знаю, что есть реквизит под названием maxWidth и я этим воспользовался. Он увеличивает ширину только до 900 пикселей (когда maxWidth="lg"). Я знаю, что есть fullScreen реквизит, в котором диалоговое окно занимает весь экран. Чего я хочу, так это не занимать весь экран, но я хочу иметь ширину больше 900 пикселей. Кто-нибудь может мне помочь?

Question 2

Понял это...

Вы должны импортировать makeStyles От material-ui/core и переопределите некоторые стили материалов.

Это общий код компонента диалогового окна.

import React from 'react';

//Material UI Components
import {
  Dialog,
  DialogContent
} from '@material-ui/core';

//Material UI Styling
import {
  makeStyles
} from '@material-ui/core/styles';

const useStyles = makeStyles({
  root: {
    ".MuiDialogContent-root": {
      padding: "0px 24px 8px 24px !important"
    },
    "& .MuiDialog-paperWidthLg": {
      maxWidth: "none !important"
    },
    "& .MuiDialog-paper": {
      margin: 0
    },
    "& .MuiDialogTitle-root": {
      padding: "4px !important"
    }
  },
  content: {
    "&:first-child": {
      paddingTop: "12px"
    }
  }
});



export default function PopUp(props) {

  const {
    children,
    openPopup,
    setOpenPopup,
  } = props;
  const classes = useStyles();

  const handleClose = () => {
    setOpenPopup(false);
  };

  return (

    <
    Dialog className = {
      classes.root
    }
    onClose = {
      handleClose
    }
    open = {
      openPopup
    }
    maxWidth = "lg" >

    <
    DialogContent className = {
      classes.content
    } > {
      children
    } <
    /DialogContent>

    <
    /Dialog>

  )
}

Question 3

Интерфейс Material Ui имеет очень большое количество способов настройки своих компонентов, я могу предложить вам прочитать документацию об этом: Как настроить

Когда речь идет об одном компоненте, вам может быть проще использовать sx prop

Например, как написано в документации:

<Slider
  defaultValue={30}
  sx={{
    width: 300,
    color: 'success.main',
  }}
/>

Shakya Karunathilake · Answer 1 · 2021-11-24T08:59:48

Понял это...

Вы должны импортировать makeStyles От material-ui/core и переопределите некоторые стили материалов.

Это общий код компонента диалогового окна.

import React from 'react';

//Material UI Components
import {
  Dialog,
  DialogContent
} from '@material-ui/core';

//Material UI Styling
import {
  makeStyles
} from '@material-ui/core/styles';

const useStyles = makeStyles({
  root: {
    ".MuiDialogContent-root": {
      padding: "0px 24px 8px 24px !important"
    },
    "& .MuiDialog-paperWidthLg": {
      maxWidth: "none !important"
    },
    "& .MuiDialog-paper": {
      margin: 0
    },
    "& .MuiDialogTitle-root": {
      padding: "4px !important"
    }
  },
  content: {
    "&:first-child": {
      paddingTop: "12px"
    }
  }
});



export default function PopUp(props) {

  const {
    children,
    openPopup,
    setOpenPopup,
  } = props;
  const classes = useStyles();

  const handleClose = () => {
    setOpenPopup(false);
  };

  return (

    <
    Dialog className = {
      classes.root
    }
    onClose = {
      handleClose
    }
    open = {
      openPopup
    }
    maxWidth = "lg" >

    <
    DialogContent className = {
      classes.content
    } > {
      children
    } <
    /DialogContent>

    <
    /Dialog>

  )
}

Francesco Vattiato · Answer 2 · 2021-11-24T09:11:51

Интерфейс Material Ui имеет очень большое количество способов настройки своих компонентов, я могу предложить вам прочитать документацию об этом: Как настроить

Когда речь идет об одном компоненте, вам может быть проще использовать sx prop

Например, как написано в документации:

<Slider
  defaultValue={30}
  sx={{
    width: 300,
    color: 'success.main',
  }}
/>

я пытался это сделать. это увеличивает ширину только до 900 пикселей. мне нужно больше ширины, чем это

Диалоговое окно Javascript пользовательского интерфейса материала увеличивает ширину

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории