Material UI Button hover background color and text color

 https://stackoverflow.com/questions/64983425/material-ui-button-hover-background-color-and-text-color

You can do that in MUI v5 using sx prop:

<Button
  variant="text"
  sx={{
    ':hover': {
      bgcolor: 'primary.main', // theme.palette.primary.main
      color: 'white',
    },
  }}
>
  Text
</Button>

Or styled() if you want to create a reusable component:

const StyledButton = styled(Button)(({ theme, color = 'primary' }) => ({
  ':hover': {
    color: theme.palette[color].main,
    backgroundColor: 'white',
  },
}));

<StyledButton variant="contained" color="primary">
  Contained
</StyledButton>
<StyledButton variant="contained" color="secondary">
  Contained
</StyledButton>