chip inside toolbar incorrect vertical alignment - reactjs

Question

Problem description
I am trying to put a chip inside a toolbar and am having problems with vertical alignment. I can fix it with overriding some styles of course, but as a real beginner I assume I'm doing something wrong i.e. not using the material-ui components in the right way?
Steps to reproduce
If I put a chip as a direct child of an appbar the chips fills the whole height incorrectly:
http://i.imgur.com/2mHKaIV.png
render() {
return (
<Toolbar>
<Chip>
<Avatar icon={<AccountCircleIcon />} />
Not signed in
</Chip>
</Toolbar>
)
}
If I wrap it in a list item it's height is correct but it still isn't centered in the toolbar:
http://i.imgur.com/Ksc5CTd.png
render() {
return (
<Toolbar>
<ListItem disabled={true}>
<Chip>
<Avatar icon={<AccountCircleIcon />} />
Not signed in
</Chip>
</ListItem>
</Toolbar>
)
What am I doing wrong?
(naturally I want it vertically centered in the toolbar and of the correct height for a chip)
Versions
Material-UI: 0.15.4
React: 15.3.2
Browser: Chrome 53.0.2785.116 (Mac OSX)

Answer 1

I was able to do a mockup (I hate how difficult it is to set up React/Material-Ui problems) and found the same issue. I think it's expected behavior from how the chip is positioned.
However, it is all fixed with margin: 'auto'
render() {
return (
<Toolbar>
<Chip style={{ margin: 'auto' }}>
<Avatar icon={<AccountCircleIcon />} />
Not signed in
</Chip>
</Toolbar>
)
}