芯片内部工具栏不正确的垂直对齐

Question

问题描述

我正试图把一个芯片内的工具栏和我有垂直对齐的问题。当然，我可以用重写一些样式来修复它，但作为一个真正的初学者，我假设我做错了什么，即没有以正确的方式使用材质ui组件?

复制

步骤

如果我把一个芯片作为appbar的直接子节点，芯片将不正确地填充整个高度:https://i.stack.imgur.com/4Agpy.png

render() { return ( <Toolbar> <Chip> <Avatar icon={<AccountCircleIcon />} /> Not signed in </Chip> </Toolbar> ) }

如果我把它包裹在一个列表项中，它的高度是正确的，但它仍然没有在工具栏中居中:https://i.stack.imgur.com/iULPP.png

render() { return ( <Toolbar> <ListItem disabled={true}> <Chip> <Avatar icon={<AccountCircleIcon />} /> Not signed in </Chip> </ListItem> </Toolbar> )

我做错了什么?(当然，我希望它垂直居中的工具栏和正确的高度为一个芯片)

版本

• Material-UI: 0.15.4
• 反应:15.3.2
• 浏览器:Chrome 53.0.2785.116 (Mac OSX)

Answer 1

我能够做一个模型(我讨厌设置React/Material-Ui问题有多困难)，并发现了同样的问题。我认为这是预期的行为，从芯片的位置。

但是，它都是固定的，margin: 'auto'

render() {
    return (
    <Toolbar>
        <Chip style={{ margin: 'auto' }}>
            <Avatar icon={<AccountCircleIcon />} />
            Not signed in
        </Chip>
    </Toolbar>
    )
}