如何改变组件的距离，使它们不重叠？

Question

我想更改组件（文本字段和按钮）的距离，使它们不重叠，但它们之间有一个 space，我不知道该怎么做。

我想在字段文本和按钮之间至少添加 1-2 spaces

外观如下：

代码：

import * as React from 'react';
import TextField from '@mui/material/TextField';
import { Box, Paper, Button} from '@mui/material';

export default function Student() {
    const paperStyle={padding:'50px 20px', width:600, margin:"20px auto"}
    const[name, setName]=React.useState('')
    const[address, setAddress]=React.useState('')
  return (
    <Box
    
      component="form"
      sx={{
        '& > :not(style)': { m: 1, },
      }}
      noValidate
      autoComplete="off"
    >
                <Paper elevation={3} style={paperStyle}>
                    <h1 style={{color:"blue"}}><u>text</u></h1>
      <TextField id="outlined-basic" label="Name" variant="outlined" fullWidth 
      value={name}
      onChange={(e)=>setName(e.target.value)}
      />
      <TextField id="outlined-basic" label="Address" variant="outlined" fullWidth
        value={address}
        onChange={(e)=>setAddress(e.target.value)}
      />
      <Button variant="outlined">Primary</Button>
      {name}
      {address}
      </Paper>
    </Box>
  );
}

Answer 1

也许 style={{ bottomGap: 10 }} 到两个 TextField 组件？

Answer 2

你的 Box 上的 sx 道具会增加元素之间的边距：

sx={{
  "& > :not(style)": { m: 1 }
}}

但 > 将其限制为仅直接在 Box 内形成元素，但由于您添加了 Paper，因此 css 选择器不再捕获。

最简单的事情就是从 Box 到 Paper

更多的 sx 道具

这是一个工作示例：https://codesandbox.io/s/romantic-rubin-80o3d2?file=/src/App.js

如何改变组件的距离，使它们不重叠？

How to change the distance of components so that they do not overlap?

javascript

reactjs

material-ui