Fix dialog material ui - material-ui

Question

I have a dialog with material ui where i have a text and then 4 fields textfield.
The problem is that the elements inside dialogcontent doesnt fill all the space in the dialog leaving one blank space on the right side.
I would like to give some space between the textfields in the same row as well as space-evenly these elements.
This is my dialog definition:
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>
);
}
I have tried to wrap everything in a Grid element and specifying the size of it but it didn't work.
Thank you so much.

Answer 1

Using a Grid and fullWidth property on the Textfields will solve your issue:
<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>
The Grid will order the textfields into two rows and two columns by setting xs to 6 on the grid childs. Then in order to make your textfields span the entire width of the grid child you can use the fullWidth property.