How to create a split button when one button can be disabled with tooltip?

Question

I'm trying to create a split button with the use of Material UI components like ButtonGroup and Button : https://material-ui.com/components/button-group/#split-button .

The problem is the first button can be disabled and also show a tooltip when it's disabled. The recommendation is to wrap the button with span , but then it breaks the styling of the buttons. Is there any solution for this or I have to use custom styling for the buttons?

The code I use:

<ButtonGroup variant="contained" color="primary" aria-label="split button">
  <Tooltip title="You don't have permission to do this">
    <span>
      <Button disabled onClick={handleClick}>Send</Button>
    </span>
  </Tooltip>
  <Button onClick={handleToggle}>
    <ArrowDropDownIcon />
  </Button>
</ButtonGroup>

Answer 1

Just add style to span;

background-color: rgba(0, 0, 0, 0.12) //same color used for disabled button