Griffel - CSS in JS - Cannot overwrite child class rule on parent element hover

Question

I'm using Griffel https://griffel.js.org/ for the first time and I am struggling to achieve this simple thing. By default this button is hidden and when the user hover's over the parent I want to make the child visible.

I am using React so I have this button component inside 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 was not sure if it will know what the removeUserButton class is so I also tried by making it variable. So I added:

const removeUserClassName = 'removeUserButton';

on top of the file and then in CSS:

[removeUserClassName]: {
  display: 'none'
},
userContainer: {
  backgroundColor: '#fefefe',
  '&:hover': {
    [`& ${removeUserClassName}`]: {
      display: 'inline-block'
    }
  }
}

But this still does not work. And in case you are wondering I have also tried the first piece of code by adding . before removeUserButton.

Has anyone used Griffel and knows how to handle this? Appreciate any guidance. Thank you!

Here is a sandbox I created: https://codesandbox.io/s/griffel-hover-issue-gwx1sj

I can try to create a sandbox, issue is that hover part does not work. Also this worked fine when I was using regular CSS modules. Right now I am in a process of moving code to Griffel and cannot get this to work — sayayin
– sayayin, Commented Feb 3, 2023 at 0:34

Randy Casburn · Accepted Answer · 2023-02-03 00:58:03Z

1

The issue is that you are attempting to use a classname that is in your configuration (removeUserClassName). Yet, Griffel uses dynamic class names. So you'll need to use a different selector.

You can see the nature of the dynamic class names in this playground example.

Here is a working StackBlitz that uses the button as selector rather than class name and it works fine.

Here is the code for reference:

import { makeStyles } from '@griffel/react';

export const useStyles = makeStyles({
  removeUserButton: {
    display: 'none',
  },
  userContainer: {
    width: '150px',
    height: '50px',
    backgroundColor: 'black',
    ':hover': {
      '& button': { display: 'inline-block' },
      backgroundColor: 'blue',
    },
  },
});

edited Feb 3, 2023 at 0:58

answered Feb 2, 2023 at 23:13

Randy Casburn

14.2k1 gold badge19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

sayayin Over a year ago

sorry that was a typo here, in my code I do have quotes.

sayayin Over a year ago

I have added quotes to the code in my question

Randy Casburn Over a year ago

I've changed the answer. Hope this helps.

sayayin Over a year ago

yeah works with a button, guess if I cannot figure it with the class I can change code to this

Randy Casburn Over a year ago

There are many, many ways to use CSS selectors that can allow you to select any element very precisely. Using the classname is unnecessary really.

|

Collectives™ on Stack Overflow

Griffel - CSS in JS - Cannot overwrite child class rule on parent element hover

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related