My first experience with Griffel is proving to be a challenge. I am struggling to achieve a simple task where a button is hidden by default and should become visible when the user hovers over its parent element.
In my React application, the button component resides within the parent div:
const styles = useStyles();
<div className={styles.userContainer}>
<Button className={styles.removeUserButton} />
</div>
CSS:
export const useStyles = makeStyles({
removeUserButton: {
display: 'none'
},
userContainer: {
backgroundColor: '#fefefe',
'&:hover': {
'& removeUserButton': {
display: 'inline-block'
}
}
}
})
I tried creating a variable for the class name as well, but it did not work:
const removeUserClassName = 'removeUserButton';
In CSS:
[removeUserClassName]: {
display: 'none'
},
userContainer: {
backgroundColor: '#fefefe',
'&:hover': {
[`& ${removeUserClassName}`]: {
display: 'inline-block'
}
}
}
Unfortunately, this approach also failed to produce the desired outcome. If anyone has experience with Griffel and knows how to solve this issue, your guidance would be greatly appreciated. Thank you!
Link to sandbox: https://codesandbox.io/s/griffel-hover-issue-gwx1sj