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

【问题标题】：How to stretch width of a Dialog box of material ui in reactjs?如何在reactjs中拉伸材质ui对话框的宽度？
【发布时间】：2020-09-02 09:31:31
【问题描述】：

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

谁能帮我解答这个问题？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

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

【讨论】：