Malzeme UI Javascript İletişim Kutusu genişliğini artırın

Question 1

React js ile material uı'den dialog kullanıyorum ve genişliğini artırmak istiyorum. Adında bir sahne olduğunu biliyorum. maxWidth ve bunu kullandım. Sadece genişliği 900px'e kadar artırır (ne zaman maxWidth="lg"). Bir olduğunu biliyorum fullScreen iletişim kutusunun tüm ekranı kapladığı pervane. İstediğim tüm ekranı almak değil, 900px'den daha geniş bir genişliğe sahip olmak istiyorum. Biri bana yardım edebilir mi?

Question 2

Anladım...

İçe aktarmanız gerekiyor makeStyles -den material-ui/core ve bazı malzeme stillerini geçersiz kılın.

Bu iletişim paylaşılan bileşen kodudur.

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

Malzeme Kullanıcı Arayüzünün bileşenlerini özelleştirmek için çok sayıda yolu vardır, bununla ilgili belgeleri okumanızı önerebilirim: Nasıl özelleştirilir

Tek bir bileşenle ilgili olduğunda, sx prop'u kullanmanız sizin için daha kolay olabilir

Örneğin dokümantasyonda yazıldığı gibi:

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

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

Anladım...

İçe aktarmanız gerekiyor makeStyles -den material-ui/core ve bazı malzeme stillerini geçersiz kılın.

Bu iletişim paylaşılan bileşen kodudur.

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

Malzeme Kullanıcı Arayüzünün bileşenlerini özelleştirmek için çok sayıda yolu vardır, bununla ilgili belgeleri okumanızı önerebilirim: Nasıl özelleştirilir

Tek bir bileşenle ilgili olduğunda, sx prop'u kullanmanız sizin için daha kolay olabilir

Örneğin dokümantasyonda yazıldığı gibi:

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

ben denedim. sadece 900px'e kadar genişliği arttırır. bundan daha genişliğe ihtiyacım var

Malzeme UI Javascript İletişim Kutusu genişliğini artırın

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride