我有以下 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',
},
},
})
提前致谢!
最佳答案
1.可以使用模板.css-
用于 child css
const descriptionCss = css`
background: yellow;
`
const contentCss = css`
&:hover .css-${descriptionCss.name} {
background: red;
}
`
2. 或者你仍然可以使用经典的类,只为你需要的一些元素使用类。const contentCss = css`
&:hover .custom-class-for-some-div {
background: red;
}
`
关于javascript - 使用 css 在情感中嵌套,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55555587/