ListItem-更改动画的背景色

Question

当我单击ListItem时，动画的背景颜色与彩色文本（CodeSandbox）相同：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

// We can inject some CSS into the DOM.
const styles = {
  button: {
    background: '#cccccc',
    borderRadius: 3,
    border: 0,
    color: '#00ff00',
    height: 48,
    padding: '0 30px',
  },
};

function ClassNames(props) {
  return (
    <Button className={props.classes.button}>
      {props.children ? props.children : 'class names'}
    </Button>
  );
}

ClassNames.propTypes = {
  children: PropTypes.node,
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ClassNames);

是否可以为文本设置两种不同的颜色并单击动画？