reactjs - 将带有嵌套类的 css 转换为样式组件问题

Question

我在理解样式组件中的嵌套时遇到问题，我有一个代码需要在我的项目中实现，但我不完全理解如何使用 styled-comp 编写相同的内容。由于类的嵌套..

CSS:

#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}

HTML:

<div id="cf">
  <img class="bottom" src="/images/Cirques.jpg" />
  <img class="top" src="/images/Clown%20Fish.jpg" />
</div>

我已经使用样式组件几个星期了，所以我了解基础知识，我只是在编写 2 个嵌套对象时遇到问题，就像它在 css 中显示的那样......

如果你有时间解释一下，那就太好了:)

Answer 1

它成为了:

import Styled from 'styled-components';

const MyDiv = Styled.div`
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;

  img {
    position:absolute;
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;

    &.top:hover{
       opacity:0;
    }
  }
`

使成为

<MyDiv />

工作示例

https://codesandbox.io/s/xj3y2qz87q