reactjs - Material-UI 悬停效果线偏移错误（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。

在此先感谢您的帮助。

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

按钮包装器

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

模态包装器

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

普通的 RaisedButton 本身

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

模态的普通 RaisedButton

...
<li>
    <h4>Plain Modal</h4>
    <Button label="Modal Dialog" onClick={ this.handleOpen } />
    <Modal
        open={ this.state.open }
        handleClose={ this.handleClose }
        handleOpen={ this.handleOpen } />
</li>
...

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