reactjs Align Items Flexbox,React中的React Material

jaql4c8m  于 2023-06-05  发布在  React
关注(0)|答案(3)|浏览(192)

我在我的React应用程序中使用了flexbox,React Material,我想将搜索栏和清除按钮对齐在同一行上,并在彼此之间留出空间。
请看这个链接
CLICK HERE

<div className={classes.searchBarSection}>
      <Paper component="form" className={classes.searchBar}>
        <InputBase
          className={classes.input}
          placeholder="Search..."
          inputProps={{ "aria-label": "search..." }}
        />
        <IconButton
          type="button"
          className={classes.iconButton}
          aria-label="search"
        >
          <SearchIcon />
        </IconButton>
      </Paper>
      <Button variant="contained" size="small" color="primary">
        Clear
      </Button>
    </div>
xsuvu9jc

xsuvu9jc1#

试试这个:

searchBarSection: {
    display: "flex",
    justifyContent: "space-between",
    width: "300px"
  },

调整宽度,以获得所需的间距
这将看起来像:

nkoocmlb

nkoocmlb2#

添加这些样式后,宽度会给予searchBatSection留出喘息的空间,给孩子们留出空间。尝试使用justifyContent选项来找到适合的选项。

searchBarSection: {
    width: "50%",
    display: "flex",
    justifyContent: "space-between"
  },
l7wslrjt

l7wslrjt3#

使用网格

searchBarSection: {
    display: 'grid',
    gridTemplateColumns: '0.8fr 0.2fr',
    gap: '12px',
  },

https://codesandbox.io/s/material-demo-6w93i

相关问题