问如何使material-ui stepper像粘性水平菜单
EN

Stack Overflow用户

提问于 2021-05-20 16:02:08

回答 1查看 363关注 0票数 0

我正在使用Material-UI stepper，我想看看是否可以在向下滚动页面时将stepper粘贴到页面顶部AppBar的正下方。

我有以下的风格和步骤代码。我尝试过postion: fixed，但这不起作用。

  stepper: {
    padding: theme.spacing(0, 0, 5),
    backgroundColor: '#EAEFF1',
    zIndex: 1,
    color: '#fff',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    position: fixed,
    top: 30
  },
  stepIcon: {
    transform: "scale(1.5)",
    "font-size": "50px"
  },

                <React.Fragment>
                  <Grid item xs={12}>
                    <Stepper activeStep={activeStep} className={classes.stepper} alternativeLabel>
                        {steps.map(label => (
                          <Step key={label}>
                            <StepLabel
                                classes={{
                                  alternativeLabel: classes.alternativeLabel,
                                  active: classes.alternativeLabelActive,
                                  iconContainer: classes.stepIcon
                                }}
                            >
                              {label}
                            </StepLabel>
                          </Step>
                        ))}
                    </Stepper>
                  </Grid>
                </React.Fragment>

有什么想法吗？

reactjs

material-ui

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-05-20 16:37:35

要将Stepper固定在AppBar的正下方，可以将Stepper组件包装在一个单独的AppBar组件中，并将该AppBar的上边距设置为theme.mixins.toolbar.minHeight。请查看此CodeSandbox以获取工作示例。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67616333

复制

相似问题

问如何使material-ui stepper像粘性水平菜单
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使material-ui stepper像粘性水平菜单EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使material-ui stepper像粘性水平菜单
EN