定位第一个子 CSS 样式组件

Question

我正在使用 styled-components 并希望定位 Text 的第一个孩子，但我无法这样做。

 const Text = styled.p`
    font-size: 12px;
    &:first-child {
        margin-bottom: 20px;
    }
`;

... component

return(
   <div>
      <p>I am just regular text</p>
      <p>Me too</p>
      <Text>Hello Joe</Text> // this should have the margin bottom
      <Text>Goodbye</Text >
   </div>
)

原文由 peter flanagan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最后，我得到了你的问题。样式化的组件与前两个本机 p 标签混淆（从我的角度来看），这就是不应用 CSS 的原因。

我将使用这样的解决方法：

 const Text = styled.p`
    font-size: 12px;
    color: blue;
    &:nth-child(3) {
        margin-bottom: 20px;
        color: red !important;
    }
`;

通过这样做，您正在为 CSS 选择第三个孩子（包括前两个 p 标签）

或者，您可以执行以下操作：为标签添加类名并为该类提供 CSS。

 const Text = styled.p`
  font-size: 12px;
  color: blue;
  &.colors {
    margin-bottom: 20px;
    color: red !important;
  }
`;

 <div>
    <p>I am just regular text</p>
    <p>Me too</p>
    <Text className="colors">Hello Joe</Text>
    <Text>Goodbye</Text>
</div>

这是 演示

希望能帮助到你 ：）

原文由 Thinker 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

像这样使用

const Text = styled.p`
   font-size: 12px;
    > * {
      &:first-child {
         margin-bottom: 20px;
      }
    }
`;

原文由 Dagar 发布，翻译遵循 CC BY-SA 4.0 许可协议