Ripple effect on Card - Material UI

TouchRipple.js

import React, {PropTypes} from "react";
import {Card, RaisedButton,  CardText} from "material-ui";


const getStyles = () => ({
    clickableCard: {
        style: {
            height: 'auto',
            width: '100%',
            margin: '0px',
            padding: '0px'
        }
    },
    cardStyle: {
        style: {
            height: '100%',
            flex: '1'
        },
        containerStyle: {
            height: '100%',
            display: 'flex',
            flexDirection: 'column'
        }
    },
});


class ClickableCard extends React.Component {
    // ... do props checks ...
    // ... events ....
    render(){
        const styles = getStyles();
        return (
            <RaisedButton
                style={{
                    ...styles.clickableCard.style,
                    ...this.props.style
                }}>
                <Card
                    className={this.props.className}
                    style={styles.cardStyle.style}
                    containerStyle={Object.assign(styles.cardStyle.containerStyle, this.props.containerStyle)}>
                    {/* --- Card childs --- */}
                    <CardText>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
                        Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
                        Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
                    </CardText>
                </Card>
            </RaisedButton>
        );
    }
}

export default ClickableCard;