如何减小 flex MUI 网格之间的间隙？

huangapple
go评论110阅读模式
英文:

How do I reduce the gap between flex MUI grids?

问题

  1. // Custom TextField to avoid styling repetitions
  2.   width: 650px;
  3. // Custom Typography to avoid styling repetitions
  4.   font-weight: 700;
  6. const asterisk = <span style={{ color: 'red' }}>*</span>;
  8. const MailThread = () => {
  9.   // ...
  10.   <Container maxWidth={false} component="main">
  11.     <CssBaseline />
  12.     <Box component="form" noValidate onSubmit={onSubmit} sx={{ mt: 3, display:'flex' }}>
  13.       <Grid  container spacing={2}>
  14.         <Grid item xs={12}>
  15.           Thread Name{asterisk}
  16.           <Field
  17.             name="threadName"
  18.             required
  19.             value={threadName}
  20.             onChange={onChange}
  21.           />
  22.         </Grid>
  23.         // ...
  24.       </Grid>
  25.       <Grid container spacing={2} sx={{marginLeft:'10px'}}>
  26.         <Grid item xs={12}>
  27.           Template
  28.           <Field placeholder="Enter subject here" onChange={onChange} />
  29.         </Grid>
  30.       </Grid>
  31.     </Box>
  32.   </Container>
  33. };
英文:

I am building a form using MUI. I have 6 fields and want to place them 3 of them on the left and the rest on the right, with a minimal gap. This is what I want to achieve: 如何减小 flex MUI 网格之间的间隙？

This is what I have currently:
如何减小 flex MUI 网格之间的间隙？

So far I have tried the gap property but no luck. I might be using the flex incorretly but again I'm not sure. This is the code I have:

  1. import styled from &quot;@emotion/styled&quot;;
  2. import {
  3.   Box,
  4.   Button,
  5.   Container,
  6.   CssBaseline,
  7.   Grid,
  8.   Link,
  9.   TextField,
  10.   Typography,
  11. } from &quot;@mui/material&quot;;
  12. import React, { useState } from &quot;react&quot;;
  13. const Field = styled(TextField)`
  14.   // Custom TextField to avoid styling repetitions
  15.   width: 650px;
  16. `;
  17. const FieldName = styled(Typography)`
  18.   // Custom Typography to avoid styling repetitions
  19.   font-weight: 700;
  20. `;
  22. const asterisk = &lt;span style={{ color: &quot;red&quot; }}&gt;*&lt;/span&gt;;
  24. const MailThread = () =&gt; {
  25.   const [formData, setFormData] = useState({
  26.     threadName: &quot;&quot;,
  27.     from: &quot;Qmeter or 2354&quot;,
  28.     customerName: &quot;&quot;,
  29.     subject: &quot;&quot;,
  30.     dropdownOption: &quot;QNP-102 Template&quot;,
  31.     to: [],
  32.     startSending: new Date(),
  33.   });
  35.   const {
  36.     threadName,
  37.     from,
  38.     customerName,
  39.     subject,
  40.     dropdownOption,
  41.     to,
  42.     starSending,
  43.   } = formData;
  45.   const onChange = (e) =&gt; {
  46.     setFormData((prevState) =&gt; ({
  47.       ...prevState,
  48.       [e.target.name]: e.target.value,
  49.     }));
  50.   };
  52.   const onSubmit = (e) =&gt; {
  53.     e.preventDefault();
  54.   };
  56.   return (
  57.     &lt;Container maxWidth={false} component=&quot;main&quot;&gt;
  58.       &lt;CssBaseline /&gt;
  59.      
  60.         &lt;Box component=&quot;form&quot; noValidate onSubmit={onSubmit} sx={{ mt: 3, display:&#39;flex&#39; }}&gt;
  61.           &lt;Grid  container spacing={2}&gt;
  62.             &lt;Grid item xs={12}&gt;
  63.               &lt;FieldName&gt;Thread Name{asterisk}&lt;/FieldName&gt;
  64.               &lt;Field
  65.                 name=&quot;threadName&quot;
  66.                 required
  67.                 value={threadName}
  68.                 onChange={onChange}
  69.               /&gt;
  70.             &lt;/Grid&gt;
  72.             &lt;Grid item xs={12}&gt;
  73.               &lt;FieldName&gt;From&lt;/FieldName&gt;
  74.               &lt;Field
  75.                 sx={{
  76.                   backgroundColor: &quot;#f8f4f4&quot;,
  77.                 }}
  78.                 disabled
  79.                 value={from}
  80.                 name=&quot;from&quot;
  81.                 onChange={onChange}
  82.               /&gt;
  83.             &lt;/Grid&gt;
  84.             &lt;Grid item xs={12}&gt;
  85.               &lt;FieldName&gt;If Customer name is empty&lt;/FieldName&gt;
  86.               &lt;Field onChange={onChange} /&gt;
  87.             &lt;/Grid&gt;
  88.             &lt;Grid item xs={12}&gt;
  89.               &lt;FieldName&gt;Subject&lt;/FieldName&gt;
  90.               &lt;Field placeholder=&quot;Enter subject here&quot; onChange={onChange} /&gt;
  91.             &lt;/Grid&gt;
  92.             &lt;Grid item xs={12}&gt;&lt;/Grid&gt;
  93.           &lt;/Grid&gt;
  94.           &lt;Grid container spacing={2} sx={{marginLeft:&#39;10px&#39;}}&gt;
  95.             &lt;Grid item xs={12}&gt;
  96.               &lt;FieldName&gt;Template&lt;/FieldName&gt;
  97.               &lt;Field placeholder=&quot;Enter subject here&quot; onChange={onChange} /&gt;
  98.             &lt;/Grid&gt;
  99.           &lt;/Grid&gt;
  100.         &lt;/Box&gt;
  101.       
  102.     &lt;/Container&gt;
  103.   );
  104. };
  106. export default MailThread;

答案1

得分: 2

The only thing you need to use gap property is display grid or flex.
After you can apply gap in proper units: px, %, vw, vh...

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;form action=&quot;&quot; style=&quot;display: flex; gap: 20px&quot;&gt;
  2.   &lt;div style=&quot;display: flex; flex-direction: column; gap: 10px&quot;&gt;
  3.     Name: &lt;input/&gt;
  4.     Surname: &lt;input/&gt;
  5.     Age: &lt;input/&gt;
  6.   &lt;/div&gt;
  7.   &lt;div style=&quot;display: flex; flex-direction: column; gap: 10px; align-items: start&quot;&gt;
  8.     Addres: &lt;input/&gt;
  9.     Email: &lt;input/&gt;
  10.     Whatever: &lt;input/&gt;
  11.     &lt;p style=&quot;margin: 0&quot;&gt;Human? &lt;input type=&quot;radio&quot; checked/&gt;&lt;/p&gt;
  12.   &lt;/div&gt;
  13. &lt;/form&gt;

<!-- end snippet -->

You can also use margin-right (apply on the left block).

英文:

The only thing you need to use gap property is display grid or flex.
After you can apply gap in proper units: px, %,vw,vh...

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;form action=&quot;&quot; style=&quot;display: flex; gap: 20px&quot;&gt;
  2.   &lt;div style=&quot;display: flex; flex-direction: column; gap: 10px&quot;&gt;
  3.     Name: &lt;input/&gt;
  4.     Surname: &lt;input/&gt;
  5.     Age: &lt;input/&gt;
  6.   &lt;/div&gt;
  7.   &lt;div style=&quot;display: flex; flex-direction: column; gap: 10px; align-items: start&quot;&gt;
  8.     Addres: &lt;input/&gt;
  9.     Email: &lt;input/&gt;
  10.     Whatever: &lt;input/&gt;
  11.     &lt;p style=&quot;margin: 0&quot;&gt;Human? &lt;input type=&quot;radio&quot; checked/&gt;&lt;/p&gt;
  12.   &lt;/div&gt;
  13. &lt;/form&gt;

<!-- end snippet -->

You can also use margin-right(apply on the left block).

答案2

得分: 1

  1. 我个人不喜欢在网格组件中设置容器和间距，因为它会通过边距调整布局。
  3. 请检查以下代码，它使用弹性布局和间距设置布局。
  5. 如果你不想使用网格组件的属性，可以用盒子组件替换它。
  7. 祝好运！
英文:

I personally don't like the idea of setting container and spacing in the Grid component because it adjusts the layout with margins.

Please check the following code, which sets up a layout using flex and grap.

If you don't want to use the properties of the Gird component, you may replace it with the Box component.

Good luck!

  1. return (
  2.     &lt;Container maxWidth={false} component=&quot;main&quot;&gt;
  3.       &lt;CssBaseline /&gt;
  5.       &lt;Box component=&quot;form&quot; noValidate onSubmit={onSubmit} sx={{ mt: 3, display: &#39;flex&#39;, gap: 4 }}&gt;
  6.         &lt;Grid sx={{ display: &#39;flex&#39;, flexDirection: &#39;column&#39;, gap: 4 }}&gt;
  7.           &lt;Grid item xs={12}&gt;
  8.             &lt;FieldName&gt;Thread Name{asterisk}&lt;/FieldName&gt;
  9.             &lt;Field name=&quot;threadName&quot; required value={threadName} onChange={onChange} /&gt;
  10.           &lt;/Grid&gt;
  12.           &lt;Grid item xs={12}&gt;
  13.             &lt;FieldName&gt;From&lt;/FieldName&gt;
  14.             &lt;Field
  15.               sx={{
  16.                 backgroundColor: &#39;#f8f4f4&#39;,
  17.               }}
  18.               disabled
  19.               value={from}
  20.               name=&quot;from&quot;
  21.               onChange={onChange}
  22.             /&gt;
  23.           &lt;/Grid&gt;
  24.           &lt;Grid item xs={12}&gt;
  25.             &lt;FieldName&gt;If Customer name is empty&lt;/FieldName&gt;
  26.             &lt;Field onChange={onChange} /&gt;
  27.           &lt;/Grid&gt;
  28.           &lt;Grid item xs={12}&gt;
  29.             &lt;FieldName&gt;Subject&lt;/FieldName&gt;
  30.             &lt;Field placeholder=&quot;Enter subject here&quot; onChange={onChange} /&gt;
  31.           &lt;/Grid&gt;
  32.           &lt;Grid item xs={12}&gt;&lt;/Grid&gt;
  33.         &lt;/Grid&gt;
  35.         &lt;Grid&gt;
  36.           &lt;Grid item xs={12}&gt;
  37.             &lt;FieldName&gt;Template&lt;/FieldName&gt;
  38.             &lt;Field placeholder=&quot;Enter subject here&quot; onChange={onChange} /&gt;
  39.           &lt;/Grid&gt;
  40.         &lt;/Grid&gt;
  41.       &lt;/Box&gt;
  42.     &lt;/Container&gt;
  43.   )

答案3

得分: 1

I just updated your code. here you can see the live example

请也阅读此文档 Grid

  1. import styled from "@emotion/styled";
  2. import {
  3.   Box,
  4.   Button,
  5.   Container,
  6.   CssBaseline,
  7.   Grid,
  8.   Link,
  9.   TextField,
  10.   Typography,
  11. } from "@mui/material";
  12. import React, { useState } from "react";
  13. const Field = styled(TextField)`
  14.   // 自定义的 TextField，避免样式重复
  15.   width: 100%;
  16. `;
  17. const FieldName = styled(Typography)`
  18.   // 自定义的 Typography，避免样式重复
  19.   font-weight: 700;
  20. `;
  22. const asterisk = <span style={{ color: "red" }}>*</span>;
  24. const MailThread = () => {
  25.   const [formData, setFormData] = useState({
  26.     threadName: "",
  27.     from: "Qmeter or 2354",
  28.     customerName: "",
  29.     subject: "",
  30.     dropdownOption: "QNP-102 Template",
  31.     to: [],
  32.     startSending: new Date(),
  33.   });
  35.   const {
  36.     threadName,
  37.     from,
  38.     customerName,
  39.     subject,
  40.     dropdownOption,
  41.     to,
  42.     starSending,
  43.   } = formData;
  45.   const onChange = (e) => {
  46.     setFormData((prevState) => ({
  47.       ...prevState,
  48.       [e.target.name]: e.target.value,
  49.     }));
  50.   };
  52.   const onSubmit = (e) => {
  53.     e.preventDefault();
  54.   };
  56.   return (
  57.     <Container maxWidth={false} component="main">
  58.       <CssBaseline />
  59.      
  60.         <Box component="form" noValidate onSubmit={onSubmit}>
  61.           <Grid  container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
  62.             <Grid item xs={6}>
  63.               <FieldName>Thread Name{asterisk}</FieldName>
  64.               <Field
  65.                 name="threadName"
  66.                 required
  67.                 value={threadName}
  68.                 onChange={onChange}
  69.               />
  70.             </Grid>
  72.             <Grid item xs={6}>
  73.               <FieldName>From</FieldName>
  74.               <Field
  75.                 sx={{
  76.                   backgroundColor: "#f8f4f4",
  77.                 }}
  78.                 disabled
  79.                 value={from}
  80.                 name="from"
  81.                 onChange={onChange}
  82.               />
  83.             </Grid>
  84.             <Grid item xs={6}>
  85.               <FieldName>If Customer name is empty</FieldName>
  86.               <Field onChange={onChange} />
  87.             </Grid>
  88.             <Grid item xs={6}>
  89.               <FieldName>Subject</FieldName>
  90.               <Field placeholder="Enter subject here" onChange={onChange} />
  91.             </Grid>
  92.             <Grid item xs={6}>
  93.               <FieldName>Template</FieldName>
  94.               <Field placeholder="Enter subject here" onChange={onChange} />
  95.             </Grid>
  96.             <Grid item xs={6}>
  97.               <FieldName>Start Sending</FieldName>
  98.               <Field placeholder="Enter subject here" onChange={onChange} />
  99.             </Grid>
  100.           </Grid>
  101.         </Box>
  102.       
  103.     </Container>
  104.   );
  105. };
  107. export default MailThread;
英文:

I just updated your code. here you can see the live example

please also read this documentation Grid

  1. import styled from &quot;@emotion/styled&quot;;
  2. import {
  3. Box,
  4. Button,
  5. Container,
  6. CssBaseline,
  7. Grid,
  8. Link,
  9. TextField,
  10. Typography,
  11. } from &quot;@mui/material&quot;;
  12. import React, { useState } from &quot;react&quot;;
  13. const Field = styled(TextField)`
  14. // Custom TextField to avoid styling repetitions
  15. width: 100%;
  16. `;
  17. const FieldName = styled(Typography)`
  18. // Custom Typography to avoid styling repetitions
  19. font-weight: 700;
  20. `;
  21. const asterisk = &lt;span style={{ color: &quot;red&quot; }}&gt;*&lt;/span&gt;;
  22. const MailThread = () =&gt; {
  23. const [formData, setFormData] = useState({
  24. threadName: &quot;&quot;,
  25. from: &quot;Qmeter or 2354&quot;,
  26. customerName: &quot;&quot;,
  27. subject: &quot;&quot;,
  28. dropdownOption: &quot;QNP-102 Template&quot;,
  29. to: [],
  30. startSending: new Date(),
  31. });
  32. const {
  33. threadName,
  34. from,
  35. customerName,
  36. subject,
  37. dropdownOption,
  38. to,
  39. starSending,
  40. } = formData;
  41. const onChange = (e) =&gt; {
  42. setFormData((prevState) =&gt; ({
  43. ...prevState,
  44. [e.target.name]: e.target.value,
  45. }));
  46. };
  47. const onSubmit = (e) =&gt; {
  48. e.preventDefault();
  49. };
  50. return (
  51. &lt;Container maxWidth={false} component=&quot;main&quot;&gt;
  52. &lt;CssBaseline /&gt;
  53. &lt;Box component=&quot;form&quot; noValidate onSubmit={onSubmit}&gt;
  54. &lt;Grid  container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}&gt;
  55. &lt;Grid item xs={6}&gt;
  56. &lt;FieldName&gt;Thread Name{asterisk}&lt;/FieldName&gt;
  57. &lt;Field
  58. name=&quot;threadName&quot;
  59. required
  60. value={threadName}
  61. onChange={onChange}
  62. /&gt;
  63. &lt;/Grid&gt;
  64. &lt;Grid item xs={6}&gt;
  65. &lt;FieldName&gt;From&lt;/FieldName&gt;
  66. &lt;Field
  67. sx={{
  68. backgroundColor: &quot;#f8f4f4&quot;,
  69. }}
  70. disabled
  71. value={from}
  72. name=&quot;from&quot;
  73. onChange={onChange}
  74. /&gt;
  75. &lt;/Grid&gt;
  76. &lt;Grid item xs={6}&gt;
  77. &lt;FieldName&gt;If Customer name is empty&lt;/FieldName&gt;
  78. &lt;Field onChange={onChange} /&gt;
  79. &lt;/Grid&gt;
  80. &lt;Grid item xs={6}&gt;
  81. &lt;FieldName&gt;Subject&lt;/FieldName&gt;
  82. &lt;Field placeholder=&quot;Enter subject here&quot; onChange={onChange} /&gt;
  83. &lt;/Grid&gt;
  84. &lt;Grid item xs={6}&gt;
  85. &lt;FieldName&gt;Template&lt;/FieldName&gt;
  86. &lt;Field placeholder=&quot;Enter subject here&quot; onChange={onChange} /&gt;
  87. &lt;/Grid&gt;
  88. &lt;Grid item xs={6}&gt;
  89. &lt;FieldName&gt;Start Sending&lt;/FieldName&gt;
  90. &lt;Field placeholder=&quot;Enter subject here&quot; onChange={onChange} /&gt;
  91. &lt;/Grid&gt;
  92. &lt;/Grid&gt;
  93. &lt;/Box&gt;
  94. &lt;/Container&gt;
  95. );
  96. };
  97. export default MailThread;

huangapple
  • 本文由 发表于 2023年4月19日 17:46:16
  • 转载请务必保留本文链接：https://go.coder-hub.com/76053056.html
  • css
  • flexbox
  • javascript
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定