Materialul UI Javascript Dialog creșterea lățime

Question 1

Eu sunt, folosind fereastra de dialog din material ui cu reacționa js și doriți pentru a crește lățimea de ea. Știu că este un accesoriu numit maxWidth și eu am folosit-o. Aceasta crește doar latimea de pana la 900px (când maxWidth="lg"). Știu că există o fullScreen prop în care dialogul are întregul ecran. Ceea ce vreau este să nu ia întregul ecran, dar vreau să am mai mult decât lățimea 900px. Ma poate ajuta cineva?

Question 2

Și-a dat seama...

Trebuie să importați makeStyles din material-ui/core și suprascrie unele materiale de styling.

Acest lucru este dialog de componente partajate cod.

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

Materialul Ui are o cantitate foarte mare de moduri, în scopul de a personaliza componentele lor, am putea sugera să citiți documentația despre ea: Cum de a personaliza

Când e vorba de o singură componentă ar putea fi mai ușor pentru tine de a utiliza sx prop

De exemplu, așa cum scrie în documentație:

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

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

Și-a dat seama...

Trebuie să importați makeStyles din material-ui/core și suprascrie unele materiale de styling.

Acest lucru este dialog de componente partajate cod.

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

Materialul Ui are o cantitate foarte mare de moduri, în scopul de a personaliza componentele lor, am putea sugera să citiți documentația despre ea: Cum de a personaliza

Când e vorba de o singură componentă ar putea fi mai ușor pentru tine de a utiliza sx prop

De exemplu, așa cum scrie în documentație:

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

am încercat asta. aceasta crește doar latimea de pana la 900px. am nevoie de mai mult decât lățimea

Materialul UI Javascript Dialog creșterea lățime

Problema

Cel mai bun răspuns

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie