如何在reactjs中拉伸材质ui对话框的宽度？

如何解决如何在reactjs中拉伸材质ui对话框的宽度？

我的目标是为对话框设置最大宽度，但是我无法修复对话框的最大宽度。具有“ 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>
      </>
    );
  }
}

Here is the sample

有人可以在此查询中为我提供帮助吗？

解决方法

您可以选择使用withStyles覆盖Dialog 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);