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对象没有关于“描述”的引用。您可以做的是像这样参考descriptions段落标签：

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

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

使用CSS嵌套情感

1 个答案: