如何使材料UI的组件响应？

Question

我对材料UI是相对较新的，并且已经设计了类型搜索的文本字段。我希望它能迅速响应。但是我无法在屏幕尺寸的屏幕尺寸中渲染宽度小于423

<Box
  sx={{ flexGrow: 1 }}
  m={5} pt={5}
  display="flex"
  justifyContent="flex-end"
  alignItems="flex-end"
>
  <Grid item sx={{ flexGrow: 1 }} spacing={{ xs: 1, md: 2,lg:2}} columns={{ xs: 2, sm: 2, md: 12 ,lg: 22}} display="flex"
justifyContent="center"
alignItems="center" marginLeft={8} marginRight={1} mt={4} width='100%'>
    <SearchIcon style={{ coSelf: "center", margin: "5px" }} />
    <TextField
      id="standard-search"
      label="Search for a company..."
      type="search"
      variant="standard"
      textAlign="center"
      fullWidth

    />
  </Grid>
  <Button onClick={() => setLight((prev) => !prev)} variant="contained" color="primary" sx={{ height: 40 }}>
    <SettingsIcon/>
  </Button>
</Box>

任何帮助都将不胜感激。

Answer 1

看来您的搜索组件是渲染的，但藏在股票市场图表标题后面，因为它的屏幕尺寸较小。如果将其作为固定位置，请尝试将其更改为相对位置，或删除/减少其中的文本，以便快速测试变短，并可能显示搜索成分。