修复对话框 material ui

Question

我有一个与 material ui 的对话框，其中我有一个文本，然后是 4 个字段文本字段。问题是 dialogcontent 中的元素没有填满对话框中的所有 space，在右侧留下一个空白 space。

我想在同一行的文本字段之间给出一些 space 以及 space - 均匀地这些元素。

这是我的对话框定义：

import React from "react";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import {
  DialogActions,
  Button,
  DialogContent,
  DialogContentText,
} from "@material-ui/core";
import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
import { addProduct } from "../view/Items/Items";
import { useState } from "react";
import { TextField } from "@material-ui/core";
import { updateValues } from "../view/Items/Items";
import { Grid } from "@material-ui/core";

export default function AlertPopOverParametros({
  producto,
  año,
  open,
  setOpen,
  onAccept,
}) {
  const [coef_transp, setCoefTransp] = useState();
  const [coef_comer, setCoefComer] = useState();
  const [km, setKm] = useState();
  const [prod, setProd] = useState();

  return (
    <Dialog fullWidth aria-labelledby="simple-dialog-title" open={open}>
      <DialogTitle id="simple-dialog-title">
        <b>Configuración del producto</b>
      </DialogTitle>
      <DialogContent>
        <DialogContentText>
          Introduzca los valores necesarios para el cálculo del valor de huella
          hídrica
        </DialogContentText>

        <TextField
          onChange={(e) => setCoefTransp(e.target.value)}
          autoFocus
          label="Coeficiente de Transporte"
          type="number"
          value={coef_transp}
        />

        <TextField
          onChange={(e) => setCoefComer(e.target.value)}
          autoFocus
          label="Coeficiente de Comercialización"
          type="number"
          value={coef_comer}
        />

        <TextField
          onChange={(e) => setKm(e.target.value)}
          autoFocus
          label="Kilómetros"
          type="number"
          value={km}
        />

        <TextField
          onChange={(e) => setProd(e.target.value)}
          autoFocus
          label="Producción"
          type="number"
          value={prod}
        />
      </DialogContent>

      <DialogActions>
        {onAccept ? (
          <Button
            style={{
              backgroundColor: "#0068ff",
              color: "white",
              borderRadius: "5px",
            }}
            fullWidth
            onClick={() => {
              onAccept();
              console.log(producto, año, coef_transp, coef_comer, km, prod);

              updateValues(producto, año, coef_transp, coef_comer, km, prod);

              setOpen(false);
            }}
          >
            Aceptar
          </Button>
        ) : null}
      </DialogActions>
    </Dialog>
  );
}

我曾尝试将所有内容包装在一个 Grid 元素中并指定它的大小，但它不起作用。

非常感谢。

Answer 1

使用 Grid and fullWidth property on the Textfields 将解决您的问题：

<Grid container>
      <Grid xs={6}>
        <TextField
          fullWidth
          ...
        />
      </Grid>
      <Grid xs={6}>
        <TextField
          fullWidth
          ...
        />
      </Grid>
      <Grid xs={6}>
        <TextField
          fullWidth
          ...
        />
      </Grid>
      <Grid xs={6}>
        <TextField
          fullWidth
          ...
        />
      </Grid>
    </Grid>

Grid 通过将网格子项上的 xs 设置为 6，将文本字段排列成两行两列。然后，为了使您的文本字段跨越子网格的整个宽度，您可以使用 fullWidth 属性.

修复对话框 material ui

Fix dialog material ui

styles

dialog

material-ui