为什么这里的按钮没有全尺寸显示？

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容器符合其内容，因为它没有固定的高度。

要为所有按钮设置相同的高度，您要么需要在height容器上设置固定的paper，然后将每个按钮的min-height设置为{{1 }}或在按钮上设置固定的100%，使其值与GitHub按钮的值相匹配，因为它拥有最大的height。