css - 对齐项目 Flexbox ，在 React 中反应材料

Question

我在我的 React 应用程序中使用 flexbox，React Material，我想将搜索栏和清除按钮对齐在同一行，并且彼此之间有空格。

请看这个链接

点击这里

 <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>

标签： cssreactjsflexboxmaterial-designreact-material

Answer 1

尝试这个：

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

调整宽度以获得它们之间所需的空间

这看起来像：