组件在切换时占用空间而不是浮动在其他组件之上答案

【问题标题】：Component Taking space instead of float above the other components when toggled组件在切换时占用空间而不是浮动在其他组件之上
【发布时间】：2021-10-08 13:07:11
【问题描述】：

我想在我现有的 reactjs material ui 项目中添加一个日期范围组件。但问题是它占用了空间，而不是像 Select 组件那样仅仅显示它“在其他组件之上”

这是我想在我的应用程序中添加的示例 sn-p https://codesandbox.io/s/materialui-daterange-picker-2p3f1?file=/src/App.js:274-385

我的实际实现

 const Wow = () => (
    <DateRangePicker
      open={open}
      toggle={toggle}
      onChange={(range) => setDateRange(range)}
    />
 );
 const DateRange = () => (
  <>
    <Grid
      container
      spacing={1}
    >
      <Grid
        item
        lg={10}
        md={12}
        xl={9}
        xs={12}
      >
        <Button
          onClick={() => setOpen(true)}
        >
          Show
        </Button>
        <Wow />
      </Grid>
      <Grid
       item
       lg={2}
       md={12}
       xl={9}
       xs={12}
      >
        <Button
          variant="contained"
          startIcon={<CheckIcon />}
          onClick={handleSubmit}
        >
          Go
        </Button>
     </Grid>
    </Grid>
  </>
  );
  
  return (
   <>
    <Helmet>
      <title>Selectors | Clever Clicks</title>
    </Helmet>
    <Box
      sx={{
        backgroundColor: 'background.default',
        minHeight: '100%',
        py: 3
      }}
    >
    <Container maxWidth={false}>
      <Grid
        container
        spacing={1}
      >
        <Grid
          item
          lg={4}
          md={12}
          xl={9}
          xs={12}
        >
          <TextField
            id="standard-select-currency-native"
            select
            label="Market"
            onChange={handleMarket}
            SelectProps={{
              native: true,
            }}
            size="small"
            fullWidth
            helperText="Please select "
          >
            {marketplaces.map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </TextField>
        </Grid>
        <Grid
          item
          lg={4}
          md={12}
          xl={9}
          xs={12}
        >
          <TextField
            id="standard-select-currency-native"
            select
            label="Products"
            onChange={handleProduct}
            SelectProps={{
              native: true
            }}
            size="small"
            fullWidth
            helperText="Please select products"
            inputProps={{ style: { fontSize: 15, overflow: 'visible' } }}
          >
            <option value="All"> --All-- </option>
            {products.map((option) => (
              <option key={option.id} value={`${option.title},${option.seller_sku},${option.id}`}>
                {option.title}
              </option>
            ))}
          </TextField>
        </Grid>
        <Grid
          item
          lg={4}
          md={12}
          xl={9}
          xs={12}
        >
          <DateRange />
        </Grid>
      </Grid>
    </Container>
  </Box>
</>
);
};

点击按钮显示时占用空间

如果您注意到，以下组件是“强制”拉伸的。我想要的是使日期范围日历“浮动”。有什么帮助吗？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

默认情况下，DateRangePicker 组件不会有 absolute 位置，如果您想在不占用 DOM 空间的情况下定位模态框，则需要这样做。

一个通用的例子是这样的：

.datePicker {
    position: absolute;
    top: 50px;
    left: 50vw;
}

<DateRangePicker
  className="datePicker"
  open={open}
  toggle={toggle}
  onChange={(range) => setDateRange(range)}
/>

在根据您的需要修改 top 和 left 属性后使用它，如果您将它与一些媒体查询结合起来以补偿不同的屏幕尺寸。

但是，如果您想要更动态的方法，可以查看this answer.

注意：请记住，如果父容器的位置为relative，则绝对定位将相对于该元素。

【讨论】：