使用 CSS 嵌套情感

Question

我有以下 JSX 结构。

<div css={content} style={{ minHeight: props.minHeight }}>
  <p css={description}>{props.description}</p>
</div>

现在我需要编写一种样式，该样式将更改悬停description时的背景。content如何使用 css 对象在情感中编写它。

我尝试过这样做。但这没有用。

const description = css({
  background: 'yellow'
})

const content = css({
  '&:hover': {
     [description]: {
        background: 'red',
     },
   },
})

提前致谢！

Answer 1

在您的示例中，内容 css 对象没有关于“描述”是什么的引用。您可以做的是引用描述段落标签，如下所示：

const description = css({
  background: 'yellow',
});

const content = css({
  '&:hover': {
    p: {
      background: 'red',
    },
  },
});