Griffel - JS 中的 CSS - 无法覆盖父元素悬停时的子类规则

Question

我第一次使用 Griffel https://griffel.js.org/，我正在努力实现这个简单的事情。默认情况下，此按钮是隐藏的，当用户将鼠标悬停在父级上时，我想让子级可见。

我正在使用 React，所以我在父 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'
      } 
    }
  }
})

我不确定它是否知道removeUserButton类是什么，所以我也尝试将其设置为变量。所以我补充道：

const removeUserClassName = 'removeUserButton';

在文件顶部，然后在 CSS 中：

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

但这还是不行。 如果您想知道我还通过添加 .在删除用户按钮之前。

有人用过 Griffel 并知道如何处理这个问题吗？ 感谢任何指导。谢谢！

这是我创建的沙箱： https://codesandbox.io/s/griffel-hover-issue-gwx1sj

Answer 1

问题是您正在尝试使用配置中的类名 (

removeUserClassName

)。然而，Griffel 使用动态类名。因此您需要使用不同的选择器。

您可以在这个游乐场示例中看到动态类名称的本质。

这是一个正在运行的 StackBlitz，它使用 button

 作为选择器而不是类名，它工作得很好。

以下是参考代码：

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',
    },
  },
});