MUI Button hover background color and text color

I have created an Appbar with 3 buttons in it but I would like to change the color when I hover to the those buttons. The background color is #3c52b2 and the text color is #fff and I would like the background color and text color exchange when I hover to the button. I've tried the code below but still not working.

Button: { '&:hover': { backgroundColor: '#ffffff', boxShadow: 'none', }, '&:active': { boxShadow: 'none', backgroundColor: '#3c52b2', }, }, 

2 Answers

You probably don't want to change the button's :active state but the default and the :hover state. The following sets the button color to #fff and the backgroundColor to #3c52b2 and switch them on :hover.

I'm not sure how you applied the updated styles (or how you tried to override the default styles), I created this snippet below with makeStyles() but the idea is the same with the withStyles() HOC.

const { AppBar, Button, makeStyles, Toolbar, Typography, } = MaterialUI const useStyles = makeStyles({ flexGrow: { flex: '1', }, button: { backgroundColor: '#3c52b2', color: '#fff', '&:hover': { backgroundColor: '#fff', color: '#3c52b2', }, }}) function AppBarWithButtons() { const classes = useStyles() return ( <AppBar> <Toolbar> <Typography> YourApp </Typography> <div className={classes.flexGrow} /> <Button className={classes.button}> Button 1 </Button> <Button className={classes.button}> Button 2 </Button> </Toolbar> </AppBar> ); }; ReactDOM.render( <React.StrictMode> <AppBarWithButtons /> </React.StrictMode>, document.getElementById("root") )

<div></div> <script src=""></script> <script src=""></script> <script src=""></script>

You could also just create a new styled button component:

const StyledButton = withStyles({ root: { backgroundColor: '#3c52b2', color: '#fff', '&:hover': { backgroundColor: '#fff', color: '#3c52b2', }, }})(Button); 

const { AppBar, Button, Toolbar, Typography, withStyles } = MaterialUI const StyledButton = withStyles({ root: { backgroundColor: '#3c52b2', color: '#fff', '&:hover': { backgroundColor: '#fff', color: '#3c52b2', }, }})(Button); function AppBarWithButtons() { return ( <AppBar> <Toolbar> <Typography> YourApp </Typography> <div style={{flex: '1'}} /> <StyledButton> Button 1 </StyledButton> <StyledButton> Button 2 </StyledButton> </Toolbar> </AppBar> ); }; ReactDOM.render( <React.StrictMode> <AppBarWithButtons /> </React.StrictMode>, document.getElementById("root") )

<div></div> <script src=""></script> <script src=""></script> <script src=""></script>

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> 

Live Demo