title: Material UI button rendered with span that is not clickable
body: <p>I am building a site using material-UI and have run into a bit of a snag. It seems that the button is being rendered with a span element around the button's text. This makes it so the click event only fires when you click outside the span element.</p>
  
  <p>As you can imagine it's not the greatest UI to have users click buttons that don't do anything. I am sure that I am not the first one to go through this, is there a way that I can propagate the event down to the child element programmatically? Below is my component snipit:</p>
  
  <pre><code>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 =&gt; {
      const useStyles = makeStyles(theme =&gt; ({
          button: {
            margin: theme.spacing(1),
            backgroundColor: "#ff3366",
            color: "#000000"
  
          },
          input: {
            display: 'none',
          },
          ListItemText: {
              marginLeft: 105,
  
          }
        }));
  
      const classes = useStyles();
  
      return (
          &lt;React.Fragment&gt;
              &lt;AppForm&gt;
                  &lt;React.Fragment&gt;
                      &lt;Typography variant="h3" gutterBottom marked="center" align="center"&gt;
                          Order Tickets
                  &lt;/Typography&gt;
                      &lt;Typography variant="body2" align="center"&gt;
                          &lt;Link href="/premium-themes/onepirate/sign-in/" underline="always"&gt;
                              Already have an account?
              &lt;/Link&gt;
                      &lt;/Typography&gt;
                  &lt;/React.Fragment&gt;
                  &lt;Grid container spacing={2}&gt;
                      &lt;Grid item xs={12} sm={12}&gt;
                          &lt;List className={classes.root}&gt;
                              &lt;ListItem&gt;
                                  &lt;Button 
                                  variant="contained" 
                                  className={classes.button} 
                                  onClick={props.quantity} 
                                  id="basic"&gt;
                                      Add
                                  &lt;/Button&gt;
                                  &lt;ListItemText 
                                  primary="Basic" 
                                  secondary="$450" 
                                  className={classes.ListItemText}/&gt;
                                  {props.init.basic}
                              &lt;/ListItem&gt;
                              &lt;Divider variant="inset" component="li" /&gt;
                              &lt;ListItem&gt;
                              &lt;Button 
                              variant="contained" 
                              className={classes.button} 
                              onClick={props.quantity} 
                              id="exec" &gt;
                                      Add
                                  &lt;/Button&gt;
                                  &lt;ListItemText 
                                  primary="Executive" 
                                  secondary="$550" 
                                  className={classes.ListItemText}/&gt;
                                  {props.init.exec}
                              &lt;/ListItem&gt;
                              &lt;Divider variant="inset" component="li" /&gt;
                              &lt;ListItem&gt;
                              &lt;Button 
                              variant="contained" 
                              className={classes.button} 
                              onClick={props.quantity} 
                              id="vip"&gt;
                                      Add
                                  &lt;/Button&gt;
                                  &lt;ListItemText 
                                  primary="VIP" 
                                  secondary="$750"
                                  className={classes.ListItemText}/&gt;
                                  {props.init.vip}
                              &lt;/ListItem&gt;
                          &lt;/List&gt;
                          &lt;Typography variant="h2"&gt;
                              {`Total: $ ${(props.init.basic * 450) + (props.init.exec * 550) + (props.init.vip * 750)}`}
                          &lt;/Typography&gt;
                          &lt;Button
                              className={classes.button}
                              size="large"
                              color="secondary"
                              fullWidth
                              onClick={props.price}
                              id=""
                              &gt;
                              {'Proceed to Checkout'}
                              &lt;/Button&gt;
                      &lt;/Grid&gt;
                  &lt;/Grid&gt;
              &lt;/AppForm&gt;
              &lt;AppFooter /&gt;
          &lt;/React.Fragment&gt;
      );
  }
  
  export default withRoot(Tickets);
  </code></pre>
  
  <p>And the rendered HTML output of one of the buttons:</p>
  
  <pre><code>&lt;button class="MuiButtonBase-root-307 MuiButton-root-290    makeStyles-button-87 MuiButton-contained-298"
   tabindex="0"           
   type="button" 
   id="exec"&gt;
  
   &lt;span class="MuiButton-label-291"&gt;Add&lt;/span&gt; 
  
   &lt;span class="MuiTouchRipple-root-391"&gt;&lt;/span&gt;
  
   &lt;/button&gt;
  </code></pre>