मेरा उद्देश्य डायलॉग बॉक्स के लिए अधिकतम-चौड़ाई सेट करना है, लेकिन मैं डायलॉग बॉक्स की अधिकतम-चौड़ाई को ठीक करने में सक्षम नहीं हो सका। अधिकतम-चौड़ाई वाला प्रोप 'sm', 'md', 'xl', आदि। मुझे चौड़ाई 'sm' से अधिक चाहिए लेकिन 'md' से छोटी। क्या कोई इस प्रश्न में मेरी मदद कर सकता है?

यहाँ थाई कोड है:

import React from "react";
import {
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Button
} from "@material-ui/core";
export default class Sample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

  handleClickOpen = () => {
    this.setState({ open: true });
  };
  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    return (
      <>
        <Button variant="outlined" color="primary" onClick={this.handleClose}>
          Open dialog
        </Button>
        <Dialog
          maxWidth="sm"
          disableEscapeKeyDown={true}
          disableBackdropClick={true}
          open={this.state.open}
          onClose={this.handleClose}
          aria-labelledby="customized-dialog-title"
          aria-describedby="alert-dialog-description"
        >
          <DialogTitle id="form-dialog-title">Dialog Title</DialogTitle>
          <DialogContent dividers>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo,
            repellendus. Facere deleniti voluptas et, nostrum obcaecati impedit
            tempore illo eius vero rerum odio. Obcaecati consequuntur, ratione
            totam at recusandae quas.
          </DialogContent>
          <DialogActions dividers>
            <Button color="variant" onClose={this.handleClose}>
              Cancel
            </Button>
          </DialogActions>
        </Dialog>
      </>
    );
  }
}


यहाँ नमूना है

क्या कोई इस प्रश्न में मेरी मदद कर सकता है?

0
Arunya 2 सितंबर 2020, 12:31

1 उत्तर

सबसे बढ़िया उत्तर

आप Dialog CSS को ओवरराइड करने के लिए withStyles का उपयोग करने का विकल्प चुन सकते हैं - विशेष रूप से आपके परिदृश्य में paperScrollPaper

import { withStyles } from "@material-ui/core";

const styles = {
  customMaxWidth: {
    maxWidth: "none" // arbitrary value
  }
};

class Sample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
    this.classes = props.classes;
  }

  render() {
    return (
      <Dialog
        classes={{ paperScrollPaper: this.classes.customMaxWidth }}
      ></Dialog>

      ...

export default withStyles(styles)(Sample);

Edit Material-UI withStyles (makeStyles for class components)

0
95faf8e76605e973 2 सितंबर 2020, 13:16