reactjs - 情绪反应 - 无法从父级访问元素？

Question

我想将我的站点模型悬停在父级上并在卡上获取更改。

情感为我们提供了 3 个层次的解决方案。

1 - styled-component. This option works correctly!
2 - stylecss as styles in css. This option does not work!
3 - A powerful pattern that makes it possible to write styles in js. This option doesn't work.

我想以上述方式之一访问内容并获取卡片的样式，样式组件除外。

我为您提供 2 种类型。

const style = useTheme();    
  //card
  const item = css({
    display: style.geometry.displayItem,
    flexDirection: geometryDirection,
    backgroundColor: isDark ? 'black' : 'rgb(255, 94, 0)',
    height: 100,
    padding: 20,
  })
  // const item = css`
  // display: ${style.geometry.displayItem};
  // flex-direction: ${geometryDirection};
  // background-color: ${isDark ? 'black' : 'rgb(255, 94, 0)'};
  // height: 100%;
  // padding: 20px;
  // `; 

  const content = css({
    padding: style.geometry.paddingContent,
    '&:hover ': {
        item
    } & {
      backgroundColor: '#fff'
    }
  })
  // const content = css`
  //   padding: ${style.geometry.paddingContent}; 
  // `;

我请您将鼠标悬停在将为我的卡片提供样式的内容上。不工作。

文档

测试示例

.сontent:hover .card {
color: #fff
}