Styled-Componentsでのonly-childについて

Question

Styled-Componentsを使ってコンポーネントを作成しています。
下記のようなJSXで<Button remove/>が一つしかない場合にprops.removeや:only-childを使ってdisplay: none;にする方法はあるのでしょうか？
<Button add/>をクリックすると新たにitemが追加され、<Button remove/>が表示されるといった形を考えています。

<Container>
  {items.map(item => 
    <Item key={item.id}>
      <ItemContainer>
        <Text>{item.text}</Text>
        <ButtonsGroupe>
          <Button remove onClick={Remove}>Remove</Button> // :only-child: {display: none;}
          <Button add onClick={Add}>Add</Button>
        </ButtonsGroupe>
    　　</ItemContainer>
    </Item>
  )}
</Container>

解決策（Meganezaru様ありがとうございます）

export const Button = styled.div`
  ${ItemContainer}:only-child & {
    ${props => props.remove && `
      display: none;
    `}
  }
`;

Answer 1

itemsの実装方法によりますが、itemsのlengthが1より大きい場合、<Button remove/>をレンダリングするようにしてはどうでしょう？

・・・

        <ButtonsGroupe>
          {items.length > 1 && <Button remove onClick={Remove}>Remove<Button>}
          <Button add onClick={Add}>Add<Button>
        </ButtonsGroupe>

・・・

追記

&で疑似要素を使えるようなので、ButtonのStyleにこんな感じで追加してみてはどうでしょう？

  &:only-child {props => props.remove ? 'none' : 'inline'};

Comments

[ktus]

ご回答ありがとうございます。
現状ではこちらの方法で実装しております。
今回どうにかCSS側で処理できないものかと質問しておりました。

[Meganezaru]

Styled-Componentsは、あまり知らなかったのですが、面白い仕組みですね。

追記してみましたが、どうでしょうか？

[Meganezaru]

あ・・・ダメですね、たぶん。

一つ上の要素のonly-childで判定する必要がありますね・・・
今の私の理解では、仕組み的に繋げられない気がします。

[ktus]

追記ありがとうございます。
返信遅くなり大変申し訳ありません。

追記頂いたおかげで解決できました。
Meganezaru様の回答をベストアンサーにし、質問欄に解決策を追記いたします。

[Meganezaru]

なるほど、親のセレクタが使えるんですね。
勉強になりました！