css - 目标第一个子级 css 样式组件

Question

我正在使用样式组件，并希望定位 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>
)

Answer 1

终于明白你的问题了。样式化组件与前两个 native p 标记混淆(从我的 Angular 来看)，这就是不应用 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>

这是demo

希望有帮助:)