I am currently using a chip in my code and I would like to change its color when the mouse hovers over it. I attempted to achieve this by using:
hover:{
backgroundColor: 'red',
}
In addition, I incorporated
const StyledChip = withStyles( ...However, I encountered an issue as it is not working as expected. Can someone provide assistance? Thank you in advance!
The code snippet looks something like this:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';
import Chip from '@material-ui/core/Chip';
const styles = theme => ({
root: {
display: 'flex',
justifyContent: 'center',
flexWrap: 'wrap',
},
chip: {
margin: theme.spacing.unit,
},
});
const StyledChip = withStyles({
root: {
backgroundColor: 'white',
},
'&:hover': {
backgroundColor: 'red',
}
})(Chip);
function Chips(props) {
const { classes } = props;
return (
<div className={classes.root}>
<StyledChip
avatar={
<Avatar>
<FaceIcon />
</Avatar>
}
label="Clickable Deletable Chip"
/>
</div>
);
}
Chips.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Chips);
I have explored alternative solutions but unfortunately, none of them seem to work effectively.