Soy nuevo en reaccionar y estaba usando material ui. Estaba tratando de colocar una tarjeta en un elemento de cuadrícula.

aquí está mi código:

 <GridItem xs={12} sm={12} md={12} style={{ margin: "0rem" }}> <Card style={{ margin: "0rem" }}> <GridItem xs={2} sm={2} md={2}> {/* <Card style={{ margin: "0rem" }}> */} <GridItem xs={12} style={{ margin: "0rem" }}> <CustomOutlineInput style={{ margin: "0rem" }} id="coilID" label="Coil ID" variant="outlined" size="small" /> </GridItem> {/* </Card> */} </GridItem> </Card> </GridItem>;

Sin embargo, como puede ver, se genera un espacio adicional de esta manera, ¿cómo elimino esto y hago columnas dentro del elemento de la cuadrícula?

Además, ¿cómo agrego cuadros de texto en una sola fila sin aumentar el espacio? cada elemento está ocupando espacio extra: