How to disable the hover effect of material-ui button inside of a styled component
You can solve this problem by adding an inline style
export const SubmitButton = ({ onClick }) => { return ( <StyledButton variant="raised" onClick={onClick} style={{ backgroundColor: 'transparent' }} > login </StyledButton> )}
Try setting it to the same color as the background:
root = { backgroundColor: "#FFF" "&:hover": { //you want this to be the same as the backgroundColor above backgroundColor: "#FFF" }}
You can try setting the background of the button as none
button: { '&:hover': { background: 'none', },}