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

Posted 2023-02-22

【中文标题】尝试在 React 中将 CSS 覆盖功能转换为 JSS

【英文标题】：Trying to convert CSS overlay feature to JSS in React

【发布时间】：2018-05-13 13:14:31

【问题描述】：

这是我要转换的 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 游乐场网站上搜索，但无法到达任何地方。我在想这只是一个嵌套问题，但它可能更明显。只是盯着同一个问题太久。

【问题讨论】：

内联样式不能用于定位伪类或伪元素。您需要使用样式表。见这里：***.com/questions/28269669/…

CSS pseudo elements in React的可能重复

【参考方案1】：

你想要'&:hover $overlay'