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

Question

问题描述

我正在尝试将纸条放入工具栏中，但遇到垂直对齐问题。我当然可以通过覆盖某些样式来修复它，但是作为一个真正的初学者，我认为我做错了什么，即没有以正确的方式使用 material-ui 组件？

重现步骤

如果我将 chip 作为 appbar 的直接子元素，那么 chip 会错误地填充整个高度： http://i.imgur.com/2mHKaIV.png

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

如果我将它包裹在一个列表项中，它的高度是正确的，但它仍然没有在工具栏中居中： http://i.imgur.com/Ksc5CTd.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 问题有多么困难）并发现了同样的问题。我认为这是芯片放置方式的预期行为。

不过，都是固定的，有边距：'auto'

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

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

chip inside toolbar incorrect vertical alignment

reactjs

material-ui

问题描述

重现步骤

版本