css - 尝试在 React 中将 CSS 覆盖功能转换为 JSS

Question

这是我要转换的 CSS:

    .container {
  some CSS in here - figured that out 
}



.overlay {
  some CSS i can convert - not sure on below line
  transition: .5s ease;
}

这是我最纠结的 CSS

.container:hover .overlay {
  height: 100%;
}

这是我的 JSS - 在悬停效果方面不起作用:

  container: {
    position: 'relative',
    width: '100%',
    '&:hover, &:overlay': {
      height: '100%',
      border: 'solid red'
    }
  },
  overlay: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#008CBA',
    overflow: 'hidden',
    width: '100%',
    height: 0,
    transition: ['.5s', 'ease']
  },

我不知道如何转换 .container:hover .overlay 部分？我在 JSS Playground 网站上搜索，但找不到任何地方。我以为这只是一个嵌套问题，但它可能更明显。只是盯着同一个问题看太久。

Answer 1

你想要'&:hover $overlay'