Question

我在理解样式化组件中的嵌套时遇到问题，我有一个需要在我的项目中实现的代码，但是我不完全了解如何使用样式化的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

Answer 2

看一下Pseudoelements, pseudoselectors, and nesting的文档，您可以照原样使用现有的CSS，因为无论如何，它们将像应用:hover这样的效果。这就是将现有CSS应用于样式化组件的样子：

const Foo = styled.div`
  #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;
  }
`;

样式化组件的用法：

<Foo>
  <div id="cf">
    <img className="bottom" src="https://via.placeholder.com/200/0000FF/808080" />
    <img className="top" src="https://via.placeholder.com/200/FF0000/FFFFFF" />
  </div>
</Foo>

这里是example的动作。

希望有帮助！

将具有嵌套类的CSS转换为样式化组件问题

2 个答案:

渲染

工作示例