I added the css hover property to disable the button's hover effect, but it seems not work for my case, how should I fix this?
import Button from 'material-ui/Button'
import styled from 'styled-components'
const StyledButton = styled(Button)`
&:hover {
background: none;
}
`
export const SubmitButton = ({ onClick }) => {
return (
<StyledButton
variant="raised"
onClick={onClick}>
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 solve this problem by adding an inline style
export const SubmitButton = ({ onClick }) => {
return (
<StyledButton
variant="raised"
onClick={onClick}
style={{ backgroundColor: 'transparent' }} >
login
</StyledButton>
)
}
this is solution for v5 if anyone needs it
<IconButton
disableElevation
disableRipple
size="small"
sx={{
ml: 1,
"&.MuiButtonBase-root:hover": {
bgcolor: "transparent"
}
}}
>
</IconButton>
You can try setting the background of the button as none
button: {
'&:hover': {
background: 'none',
},
}
If you used the origin Button component with className instead, you could have added disableRipple to the button like that. <Button disableRipple>
You can just override it via a styled component:
const StyledButton = styled(Button)`
&:hover {
background-color: transparent;
}
`;
This should work
const StyledButton = styled(Button)`
&&.MuiButton-root {
&:hover {
background: none;
}
}
`
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.