web-dev-qa-db-ja.com

最初の子のCSSスタイル付きコンポーネントをターゲットにする

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>
)
cssreactjssassstyled-components
4
peter flanagan

最後に、私はあなたの問題を得ました。スタイル付きコンポーネントは、最初の2つのネイティブpタグと混同します（私の観点から）。これが、CSSが適用されない理由です。

私はこのような回避策を使用します：

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

これにより、CSSの3番目の子（最初の2つの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 です

それが役に立てば幸い ：）

7
Thinker

&と:first-childの間にスペースを入れないでください

&:first-child {
    margin-bottom: 20px;
}
4
dan

：nth-​​childを使用する代わりに、特定のスタイル付きコンポーネントで：last-of-typeを使用する方が適切であり、完全に機能します

export default styled.div`
    :last-of-type {
        background: red;
    }`

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