javascript - 为什么按钮在这里不采用父级的全尺寸？

Question

我想让 Repos 和 stars 按钮像 github 图标一样占据父级的整个高度。下面的代码不起作用。我还尝试为 flatButtonStyle 指定 height:100%，但整个 Paper 组件的高度都会增加以占用整个页面。如何解决这个问题？

return <>
          <Grid container>
                <Paper>
                    <Button style={flatButtonStyle}><GithubSVG /></Button>
                    <Tooltip title="Visit github.com/nateshmbhat">
                        <a target="_blank" href="https://github.com/nateshmbhat" style={{ padding: '10px' }}>nateshmbhat</a>
                    </Tooltip>
                    <Button style={flatButtonStyle}><i className="fa fa-archive"></i> repos</Button>
                    <Button style={flatButtonStyle}><i className="fa fa-star"></i> Stars</Button>
                </Paper>
          </Grid>
        </>

Answer 1

GitHub 按钮占据了 paper 容器的整个高度，因为 GitHub SVG 给了它最大的高度并且 paper 容器符合它的内容，因为它确实没有固定的高度。

为了为所有按钮设置相同的高度，您需要在 paper 容器上设置一个固定的 height 并设置每个按钮的 min-height 到 100% 或在按钮上设置一个固定的 height ，其值与 GitHub 按钮的值匹配，因为它拥有最大的 高度。