Question

对不起，我从来没有在这里发布过，所以不确定这个问题是否正确提出了。

我一直试图弄清楚如何进行这种样式设置，但无法弄清楚样式组件如何工作。

有人可以向正确的方向推我吗？

如何使用ReactJS和Styled-components做类似的事情？

figure.container .square:before,
figure.container .square:after,
figure.container .square div:before,
figure.container .square div:after {
  /* styling */
}
figure.container .square:before,
figure.container .square:after {
  /* styling */
}
figure.container .square div:before,
figure.container .square div:after {
  /* styling */
}
figure.container .square:before,
figure.container .square div:before {
  /* styling */
}
figure.container .square:after,
figure.container .square div:after {
  /* styling */
}

这是我的jsx结构：

<Figure>
  <Square>
    <div></div>
  </Square>
</Figure>

Answer 1

考虑到您可以在css选择器中省略.container，这应该可以正常工作

const Square = styled.div`
  :before, 
  :after,
  div:before, 
  div:after {
    background-color: white;
    position: absolute;
    content: "";
    display: block;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }

  :before,
  :after {
    width: 65%;
    height: 2px;
    background-color: white;
  }

  div:before,
  div:after {
    width: 2px;
    height: 65%;
  }

  :before,
  div:before {
    left: 0;
    top: 0;
  }

  :after,
  div:after {
    bottom: 0;
    right: 0;
  }
`;

但是，如果您想要一对一转换

const Figure = styled.div`
  ${Square}:before, 
  ${Square}:after,
  ${Square} div:before, 
  ${Square} div:after {
    background-color: white;
    position: absolute;
    content: "";
    display: block;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }

  ${Square}:before,
  ${Square}:after {
    width: 65%;
    height: 2px;
    background-color: white;
  }

  ${Square} div:before,
  ${Square} div:after {
    width: 2px;
    height: 65%;
  }

  ${Square}:before,
  ${Square} div:before {
    left: 0;
    top: 0;
  }

  ${Square}:after,
  ${Square} div:after {
    bottom: 0;
    right: 0;
  }
`;

样式组件多个伪元素

1 个答案: