Materiál UI Javascript Dialógové zvýšiť šírka

Question 1

Ja používam dialógové materiálu z ui s reagujú js a chcete zvýšiť šírka je. Viem, že je prop názvom maxWidth a použil som ho. To len zvyšuje šírku až 900px (pri maxWidth="lg"). Viem, že je fullScreen prop, v ktorom sa dialógové trvá celú obrazovku. To, čo chcem, je, aby si celú obrazovku, ale chcem mať viac šírke, ako 900px. Môže mi niekto pomôcť?

Question 2

Na to prišiel...

Musíte importovať makeStyles z material-ui/core a prepísať nejaký materiál styling.

Je to dialóg zdieľané zložky kód.

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

Materiál Ui má veľmi veľké množstvo spôsobov, s cieľom prispôsobiť ich súčastí, I) môže navrhnúť, aby ste si prečítajte dokumentáciu o tom: Ako prispôsobiť

Keď je to o jedného komponentu, mohlo by to byť pre vás jednoduchšie používať sx prop

Napríklad, ako je napísané v dokumentácii:

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

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

Na to prišiel...

Musíte importovať makeStyles z material-ui/core a prepísať nejaký materiál styling.

Je to dialóg zdieľané zložky kód.

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

Materiál Ui má veľmi veľké množstvo spôsobov, s cieľom prispôsobiť ich súčastí, I) môže navrhnúť, aby ste si prečítajte dokumentáciu o tom: Ako prispôsobiť

Keď je to o jedného komponentu, mohlo by to byť pre vás jednoduchšie používať sx prop

Napríklad, ako je napísané v dokumentácii:

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

snažil som sa, že. to len zvyšuje šírku až 900px. potrebujem viac šírke, ako že

Materiál UI Javascript Dialógové zvýšiť šírka

Otázka

Najlepšiu odpoveď

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii