Как уменьшить разрыв между сетками flex MUI?

Я создаю форму с помощью MUI. У меня есть 6 полей, и я хочу разместить их 3 слева, а остальные справа с минимальным зазором. Вот чего я хочу добиться:

Это то, что у меня есть на данный момент:

До сих пор я пробовал свойство разрыва, но не повезло. Возможно, я неправильно использую flex, но опять же я не уверен. Это код, который у меня есть:

import styled from "@emotion/styled";
import {
  Box,
  Button,
  Container,
  CssBaseline,
  Grid,
  Link,
  TextField,
  Typography,
} from "@mui/material";
import React, { useState } from "react";
const Field = styled(TextField)`
  // Custom TextField to avoid styling repetitions
  width: 650px;
`;
const FieldName = styled(Typography)`
  // Custom Typography to avoid styling repetitions
  font-weight: 700;
`;

const asterisk = <span style = {{ color: "red" }}>*</span>;

const MailThread = () => {
  const [formData, setFormData] = useState({
    threadName: "",
    from: "Qmeter or 2354",
    customerName: "",
    subject: "",
    dropdownOption: "QNP-102 Template",
    to: [],
    startSending: new Date(),
  });

  const {
    threadName,
    from,
    customerName,
    subject,
    dropdownOption,
    to,
    starSending,
  } = formData;

  const onChange = (e) => {
    setFormData((prevState) => ({
      ...prevState,
      [e.target.name]: e.target.value,
    }));
  };

  const onSubmit = (e) => {
    e.preventDefault();
  };

  return (
    <Container maxWidth = {false} component = "main">
      <CssBaseline />
     
        <Box component = "form" noValidate onSubmit = {onSubmit} sx = {{ mt: 3, display:'flex' }}>
          <Grid  container spacing = {2}>
            <Grid item xs = {12}>
              <FieldName>Thread Name{asterisk}</FieldName>
              <Field
                name = "threadName"
                required
                value = {threadName}
                onChange = {onChange}
              />
            </Grid>

            <Grid item xs = {12}>
              <FieldName>From</FieldName>
              <Field
                sx = {{
                  backgroundColor: "#f8f4f4",
                }}
                disabled
                value = {from}
                name = "from"
                onChange = {onChange}
              />
            </Grid>
            <Grid item xs = {12}>
              <FieldName>If Customer name is empty</FieldName>
              <Field onChange = {onChange} />
            </Grid>
            <Grid item xs = {12}>
              <FieldName>Subject</FieldName>
              <Field placeholder = "Enter subject here" onChange = {onChange} />
            </Grid>
            <Grid item xs = {12}></Grid>
          </Grid>
          <Grid container spacing = {2} sx = {{marginLeft:'10px'}}>
            <Grid item xs = {12}>
              <FieldName>Template</FieldName>
              <Field placeholder = "Enter subject here" onChange = {onChange} />
            </Grid>
          </Grid>
        </Box>
      
    </Container>
  );
};

export default MailThread;

Не могли бы вы создать фрагмент StackBlitz?

Rok Benko 19.04.2023 11:56
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
67
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Единственное, что вам нужно использовать свойство gap, это отображать grid или flex. После того, как вы можете применить gap в соответствующих единицах: px, %, vw, vh...

<form action = "" style = "display: flex; gap: 20px">
  <div style = "display: flex; flex-direction: column; gap: 10px">
    Name: <input/>
    Surname: <input/>
    Age: <input/>
  </div>
  <div style = "display: flex; flex-direction: column; gap: 10px; align-items: start">
    Addres: <input/>
    Email: <input/>
    Whatever: <input/>
    <p style = "margin: 0">Human? <input type = "radio" checked/></p>
  </div>
</form>

Вы также можете использовать margin-right (применить в левом блоке).

Лично мне не нравится идея установки контейнера и интервала в компоненте Grid, потому что он настраивает макет с помощью полей.

Пожалуйста, проверьте следующий код, который настраивает макет с помощью flex и grap.

Если вы не хотите использовать свойства компонента Gird, вы можете заменить его компонентом Box.

Удачи!

return (
    <Container maxWidth = {false} component = "main">
      <CssBaseline />

      <Box component = "form" noValidate onSubmit = {onSubmit} sx = {{ mt: 3, display: 'flex', gap: 4 }}>
        <Grid sx = {{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          <Grid item xs = {12}>
            <FieldName>Thread Name{asterisk}</FieldName>
            <Field name = "threadName" required value = {threadName} onChange = {onChange} />
          </Grid>

          <Grid item xs = {12}>
            <FieldName>From</FieldName>
            <Field
              sx = {{
                backgroundColor: '#f8f4f4',
              }}
              disabled
              value = {from}
              name = "from"
              onChange = {onChange}
            />
          </Grid>
          <Grid item xs = {12}>
            <FieldName>If Customer name is empty</FieldName>
            <Field onChange = {onChange} />
          </Grid>
          <Grid item xs = {12}>
            <FieldName>Subject</FieldName>
            <Field placeholder = "Enter subject here" onChange = {onChange} />
          </Grid>
          <Grid item xs = {12}></Grid>
        </Grid>

        <Grid>
          <Grid item xs = {12}>
            <FieldName>Template</FieldName>
            <Field placeholder = "Enter subject here" onChange = {onChange} />
          </Grid>
        </Grid>
      </Box>
    </Container>
  )
Ответ принят как подходящий

Я только что обновил ваш код. здесь вы можете увидеть живой пример

пожалуйста, прочтите также эту документацию Сетка

import styled from "@emotion/styled";
import {
  Box,
  Button,
  Container,
  CssBaseline,
  Grid,
  Link,
  TextField,
  Typography,
} from "@mui/material";
import React, { useState } from "react";
const Field = styled(TextField)`
  // Custom TextField to avoid styling repetitions
  width: 100%;
`;
const FieldName = styled(Typography)`
  // Custom Typography to avoid styling repetitions
  font-weight: 700;
`;

const asterisk = <span style = {{ color: "red" }}>*</span>;

const MailThread = () => {
  const [formData, setFormData] = useState({
    threadName: "",
    from: "Qmeter or 2354",
    customerName: "",
    subject: "",
    dropdownOption: "QNP-102 Template",
    to: [],
    startSending: new Date(),
  });

  const {
    threadName,
    from,
    customerName,
    subject,
    dropdownOption,
    to,
    starSending,
  } = formData;

  const onChange = (e) => {
    setFormData((prevState) => ({
      ...prevState,
      [e.target.name]: e.target.value,
    }));
  };

  const onSubmit = (e) => {
    e.preventDefault();
  };

  return (
    <Container maxWidth = {false} component = "main">
      <CssBaseline />
     
        <Box component = "form" noValidate onSubmit = {onSubmit}>
          <Grid  container rowSpacing = {1} columnSpacing = {{ xs: 1, sm: 2, md: 3 }}>
            <Grid item xs = {6}>
              <FieldName>Thread Name{asterisk}</FieldName>
              <Field
                name = "threadName"
                required
                value = {threadName}
                onChange = {onChange}
              />
            </Grid>

            <Grid item xs = {6}>
              <FieldName>From</FieldName>
              <Field
                sx = {{
                  backgroundColor: "#f8f4f4",
                }}
                disabled
                value = {from}
                name = "from"
                onChange = {onChange}
              />
            </Grid>
            <Grid item xs = {6}>
              <FieldName>If Customer name is empty</FieldName>
              <Field onChange = {onChange} />
            </Grid>
            <Grid item xs = {6}>
              <FieldName>Subject</FieldName>
              <Field placeholder = "Enter subject here" onChange = {onChange} />
            </Grid>
            <Grid item xs = {6}>
              <FieldName>Template</FieldName>
              <Field placeholder = "Enter subject here" onChange = {onChange} />
            </Grid>
            <Grid item xs = {6}>
              <FieldName>Start Sending</FieldName>
              <Field placeholder = "Enter subject here" onChange = {onChange} />
            </Grid>
          </Grid>
        </Box>
      
    </Container>
  );
};

export default MailThread;

Другие вопросы по теме