Matériel de l'INTERFACE utilisateur Javascript Dialogue augmentation de la largeur de

Question 1

Je suis en utilisant la boîte de dialogue à partir du matériel de l'interface utilisateur à réagir js et que vous voulez augmenter la largeur de il. Je sais qu'il est un accessoire appelé maxWidth et je l'ai utilisé. Il augmente seulement de la largeur jusqu'à 900px (quand maxWidth="lg"). Je sais qu'il y est une fullScreen prop dans lequel la boîte de dialogue prend la totalité de l'écran. Ce que je veux, c'est de ne pas prendre la totalité de l'écran, mais je veux avoir plus de largeur que de 900px. Quelqu'un peut-il m'aider?

Question 2

Pensé à elle...

Vous devez importer makeStyles à partir de material-ui/core et remplacer certains matériaux de style.

C'est la boîte de dialogue composant partagé code.

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

Matériel de l'Interface utilisateur a une très grande quantité de manières de personnaliser leurs composants, je vous suggère de lire la documentation à ce sujet: Comment personnaliser

Quand il est sur un seul composant, il pourrait être plus facile pour vous d'utiliser le sx prop

Par exemple, comme il est écrit dans la documentation:

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

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

Pensé à elle...

Vous devez importer makeStyles à partir de material-ui/core et remplacer certains matériaux de style.

C'est la boîte de dialogue composant partagé code.

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

Matériel de l'Interface utilisateur a une très grande quantité de manières de personnaliser leurs composants, je vous suggère de lire la documentation à ce sujet: Comment personnaliser

Quand il est sur un seul composant, il pourrait être plus facile pour vous d'utiliser le sx prop

Par exemple, comme il est écrit dans la documentation:

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

j'ai essayé aussi. il augmente seulement de la largeur jusqu'à 900px. j'ai besoin de plus de largeur que celle

Matériel de l'INTERFACE utilisateur Javascript Dialogue augmentation de la largeur de

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie