让按钮在反应中填满整个宽度

Question

我正在 React 中实现以下日志记录组件：

我希望所有按钮具有相同的宽度，并且我希望它们填满可用的整个宽度。

这是我的代码：

export default function Login (props: any) {
  return(
    <Box
      sx={{
        display: 'flex',
        flexWrap: 'wrap',
        '& > :not(style)': {
          m: 1,
          width: 400,
          height: 500,
        },
      }}
    >
      <Paper elevation={10}>
        <div style={{paddingTop: 30}}>
          LOGIN
        </div>
        <div style={{paddingTop: 40}}>
          <form>
            <div style={{paddingTop: 30}}>
              <FormControl variant="standard">
                <InputLabel htmlFor="email">
                  Email
                </InputLabel>
                <Input
                  id="email"
                  startAdornment={
                    <InputAdornment position="start">
                      <PersonIcon />
                    </InputAdornment>
                  }
                />
              </FormControl>
            </div>
            <div style={{paddingTop: 30}}>
              <FormControl variant="standard">
                <InputLabel htmlFor="password">
                  Password
                </InputLabel>
                <Input
                  id="password"
                  startAdornment={
                    <InputAdornment position="start">
                      <KeyIcon />
                    </InputAdornment>
                  }
                />
              </FormControl>
            </div>
            <div style={{paddingTop: 30}}>
              <Button variant="contained">Accept</Button>
            </div>
            <div style={{paddingTop: 30}}>
              <Button variant="contained" endIcon={<GoogleIcon />}>
                Login with Google
              </Button>
            </div>
            <div style={{paddingTop: 30}}>
              <Button variant="contained" >
                Cancel
              </Button>
            </div>
          </form>
          </div>
      </Paper>
    </Box>
  )
}

Answer 1

只需将全宽加到 100。

您可以使用样式化组件添加它，或者在 sx 属性中内联：{width:1}

in sx prop width 1 将被转换为 100% width

查看 mui 尺码页面 here

Answer 2

设置每个按钮的属性：style={{paddingTop: 30, width: "100%"}}

Answer 3

要使按钮占据容器的整个宽度，您可以在 Button 组件中将 fullWidth 属性设置为 true。更多信息可以参考MUI Button API.

工作演示：Demo

像这样:-

<Box
      sx={{
        display: "flex",
        flexWrap: "wrap",
        padding: "20px 40px",
        "& > :not(style)": {
          m: 1,
          width: 400,
          height: 500
        }
      }}
    >
      <Paper
        elevation={10}
        sx={{
          display: "flex",
          justifyContent: "center",
          flexDirection: "column"
        }}
      >
        <div style={{ paddingTop: 30, textAlign: "center" }}>LOGIN</div>
        <div
          style={{ paddingTop: 40, display: "flex", justifyContent: "center" }}
        >
          <form>
            <div style={{ paddingTop: 30 }}>
              <FormControl variant="standard">
                <InputLabel htmlFor="email">Email</InputLabel>
                <Input
                  id="email"
                  startAdornment={
                    <InputAdornment position="start">
                      <PersonIcon />
                    </InputAdornment>
                  }
                />
              </FormControl>
            </div>
            <div style={{ paddingTop: 30 }}>
              <FormControl variant="standard">
                <InputLabel htmlFor="password">Password</InputLabel>
                <Input
                  id="password"
                  startAdornment={
                    <InputAdornment position="start">
                      <KeyIcon />
                    </InputAdornment>
                  }
                />
              </FormControl>
            </div>
            <div style={{ paddingTop: 30 }}>
              <Button variant="contained" fullWidth>
                Accept
              </Button>
            </div>
            <div style={{ paddingTop: 30 }}>
              <Button variant="contained" endIcon={<GoogleIcon />} fullWidth>
                Login with Google
              </Button>
            </div>
            <div style={{ paddingTop: 30 }}>
              <Button variant="contained" fullWidth>
                Cancel
              </Button>
            </div>
          </form>
        </div>
      </Paper>
    </Box>

让按钮在反应中填满整个宽度

Make button to fill whole width in react

reactjs

material-ui