MDL - 涟漪效应会改变某些元素的边际

Question

我正在使用与mdl的反应，我想创建一个带抽屉的菜单，我对结果非常满意，除了一件事，当菜单上有一个滚动条我点击在菜单项上有一个涟漪效应，有时会使其他菜单项移​​动一点：

我不知道发生了什么，这是我的菜单项组件：

query: params.first

菜单：

import React from 'react'

export default class MenuItem extends React.Component {
    constructor(props) {
        super(props);

        this.onClick = this.onClick.bind(this);
    }

    onClick() {
        this.props.onClick(this.props.id);
    }

    render () {
        let liClassNames = this.props.isSelected ? 'menuItemSelected' : 'menuItemNotSelected';
        return (
            <div className={'mdl-list__item mdl-button mdl-js-button mdl-js-ripple-effect menuItem ' + liClassNames} onClick={this.onClick}>
                <span className='mdl-list__item-primary-content'>
                    <i className={'material-icons menuItemIcon md-28'}>{this.props.icon}</i>
                    <span>{this.props.screenName}</span>
                </span>
            </div>
        )
    }
}

React.propTypes = {
    id: React.PropTypes.number.isRequired,
    screenName: React.PropTypes.string.isRequired,
    icon: React.PropTypes.string.isRequired,
    isSelected: React.PropTypes.bool.isRequired,
    onClick: React.PropTypes.func.isRequired
};

当我从li标签中删除涟漪效果时，（mdl-js-ripple-effect类）它可以正常工作。

这里有什么问题？