Блог

Моя цель — установить максимальную ширину для диалогового окна, но я не смог исправить максимальную ширину диалогового окна. реквизит максимальной ширины, имеющий ‘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>
      </>
    );
  }
}


  

Вот пример

Кто-нибудь может мне помочь в этом запросе?

Вы можете использовать withStyles для переопределения диалогового CSS, в частности, 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);