Material-UI hover effect line offset bug (React) - reactjs

Question

I have been looking to implement Material-UI in my React ES6 project. As I have been trying things in a sandbox, I noticed a pretty significant styling quirk on the RaisedButton component. When hovering at times there is either a line at the top or bottom of the button where the hover effect doesn't completely overlap the button. The behavior changes when I override the margins. For instance when I have 8px margins the plain button has no line. When I add 6px margins the button has a line at the top. When I have a 4px margin it has a line at the bottom. This behavior changes also when there's different components next to each other in the HTML.
I am using Source Sans instead of Roboto, but switching back to Roboto has the same behavior. Likewise, keeping text-transform as uppercase instead of none has the same behavior.
I have tried wrapping the button in a div and applying margin or padding to that with the same result.
I am on the latest Chrome on Mac OSX 10.11.3.
Thanks in advance for your help.
I am wrapping the button in a custom class to allow consistent style overrides. Here's my wrappers:
Button Wrapper
...
let customTheme = ThemeManager.getMuiTheme(CustomTheme)
customTheme.button.textTransform = 'none'
const styles = {
button: {
margin: 8
}
}
#ThemeDecorator(customTheme)
class Button extends React.Component {
render() {
return (
<div className="c-button" style={{ display: 'inline-block' }}>
<RaisedButton
style={ styles.button }
label={ this.props.label }
onClick={ this.props.onClick }
primary={ this.props.primary }/>
</div>
)
}
}
...
Modal Wrapper
...
render() {
const actions = [
<Button
label="Cancel"
onClick={ this.props.handleClose } />,
<Button
label="Submit"
primary={ true }
onClick={ this.props.handleClose } />
]
return (
<Dialog
title="Dialog With Actions"
actions={ actions }
open={ this.props.open } >
Only actions can close this dialog.
</Dialog>
)
}
...
Plain RaisedButton by itself
...
<ul>
<li>
<h4>Plain Button</h4>
<Button label="Button" onClick={this.handleClick}/>
</li>
</ul>
...
Plain RaisedButton for Modal
...
<li>
<h4>Plain Modal</h4>
<Button label="Modal Dialog" onClick={ this.handleOpen } />
<Modal
open={ this.state.open }
handleClose={ this.handleClose }
handleOpen={ this.handleOpen } />
</li>
...
I'm hovering my mouse over the buttons in these screenshots. The only difference is the override of the margin in the first one to be 8px.