使用无法点击的跨度渲染的材质UI按钮

Question

我正在使用Material-UI构建网站，但遇到了一些麻烦。似乎在按钮的文本周围使用span元素来呈现按钮。这样一来，只有在您在span元素之外单击时，才触发click事件。

您可以想象，让用户单击不执行任何操作的按钮并不是最佳的UI。我确定我不是第一个经历此事件的人，是否可以通过编程将事件传播到子元素？下面是我的组件snipit：

import withRoot from '../onepirate/modules/withRoot';
// --- Post bootstrap -----
import React from 'react';
import { useState, useStyles } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Link from '@material-ui/core/Link';
import Typography from '../onepirate/modules/components/Typography';
import AppFooter from '../onepirate/modules/views/AppFooter';
import AppForm from '../onepirate/modules/views/AppForm';
import Button from '@material-ui/core/Button';
import MuiTextField from '@material-ui/core/TextField';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import Avatar from '@material-ui/core/Avatar';
import AddCircleIcon from '@material-ui/icons/AddCircle';
import WorkIcon from '@material-ui/icons/Work';
import BeachAccessIcon from '@material-ui/icons/BeachAccess';
import Divider from '@material-ui/core/Divider';


const Tickets = props => {
    const useStyles = makeStyles(theme => ({
        button: {
          margin: theme.spacing(1),
          backgroundColor: "#ff3366",
          color: "#000000"

        },
        input: {
          display: 'none',
        },
        ListItemText: {
            marginLeft: 105,

        }
      }));

    const classes = useStyles();

    return (
        <React.Fragment>
            <AppForm>
                <React.Fragment>
                    <Typography variant="h3" gutterBottom marked="center" align="center">
                        Order Tickets
                </Typography>
                    <Typography variant="body2" align="center">
                        <Link href="/premium-themes/onepirate/sign-in/" underline="always">
                            Already have an account?
            </Link>
                    </Typography>
                </React.Fragment>
                <Grid container spacing={2}>
                    <Grid item xs={12} sm={12}>
                        <List className={classes.root}>
                            <ListItem>
                                <Button 
                                variant="contained" 
                                className={classes.button} 
                                onClick={props.quantity} 
                                id="basic">
                                    Add
                                </Button>
                                <ListItemText 
                                primary="Basic" 
                                secondary="$450" 
                                className={classes.ListItemText}/>
                                {props.init.basic}
                            </ListItem>
                            <Divider variant="inset" component="li" />
                            <ListItem>
                            <Button 
                            variant="contained" 
                            className={classes.button} 
                            onClick={props.quantity} 
                            id="exec" >
                                    Add
                                </Button>
                                <ListItemText 
                                primary="Executive" 
                                secondary="$550" 
                                className={classes.ListItemText}/>
                                {props.init.exec}
                            </ListItem>
                            <Divider variant="inset" component="li" />
                            <ListItem>
                            <Button 
                            variant="contained" 
                            className={classes.button} 
                            onClick={props.quantity} 
                            id="vip">
                                    Add
                                </Button>
                                <ListItemText 
                                primary="VIP" 
                                secondary="$750"
                                className={classes.ListItemText}/>
                                {props.init.vip}
                            </ListItem>
                        </List>
                        <Typography variant="h2">
                            {`Total: $ ${(props.init.basic * 450) + (props.init.exec * 550) + (props.init.vip * 750)}`}
                        </Typography>
                        <Button
                            className={classes.button}
                            size="large"
                            color="secondary"
                            fullWidth
                            onClick={props.price}
                            id=""
                            >
                            {'Proceed to Checkout'}
                            </Button>
                    </Grid>
                </Grid>
            </AppForm>
            <AppFooter />
        </React.Fragment>
    );
}

export default withRoot(Tickets);

以及按钮之一的渲染HTML输出：

<button class="MuiButtonBase-root-307 MuiButton-root-290    makeStyles-button-87 MuiButton-contained-298"
 tabindex="0"           
 type="button" 
 id="exec">

 <span class="MuiButton-label-291">Add</span> 

 <span class="MuiTouchRipple-root-391"></span>

 </button>