Material-UI悬停效果行偏移bug（React）

Question

我一直在寻找在React ES6项目中实现Material-UI。正如我在沙盒中尝试的那样，我注意到RaisedButton组件上有一个非常重要的样式怪癖。当有时悬停时，按钮顶部或底部有一条线，悬停效果与按钮不完全重叠。当我覆盖边距时，行为会发生变化。例如，当我有8px边距时，普通按钮没有线。当我添加6px边距时，按钮顶部有一条线。当我有4px的边距时，底部有一条线。当HTML中的不同组件彼此相邻时，此行为也会更改。

我使用Source Sans而不是Roboto，但切换回Roboto具有相同的行为。同样，将text-transform保持为大写而不是none也具有相同的行为。

我尝试将div中的按钮包裹起来，然后将余量或填充应用于具有相同结果的按钮或填充。

我使用Mac OSX 10.11.3上的最新Chrome。

提前感谢您的帮助。

我将按钮包装在自定义类中以允许一致的样式覆盖。这是我的包装：

Button Wrapper

mymethod(2)

Modal 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>
        )
    }
}
...

Plain RaisedButton本身

...
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 for Modal

...
<ul>
    <li>
        <h4>Plain Button</h4>
         <Button label="Button" onClick={this.handleClick}/>              
     </li>
</ul>
...

我将鼠标悬停在这些屏幕截图中的按钮上。唯一的区别是第一个中的边距被覆盖为8px。