Стилизация отдельных дочерних компонентов в React

Question

У меня есть родительский компонент ButtonGroup, который принимает детей как this.props.children.Дочерние элементы, которые я передаю, - это компонент btnItem, который отображает отдельные кнопки.Мы можем добавить столько кнопок, сколько захотим.

//ButtonGroup Component

render() {
  return (
    <div>
      {this.props.children}
    </div>
  )
}

//buttonItem component: 

render() {
  return (
    <button disabled={this.props.disabled}>{this.props.caption}</button>
  )
}

//final render
<ButtonGroupComponent>
  <buttonItem caption="Nothing"/>
  <buttonItem caption="Something" disabled={true}/>
  <buttonItem caption="Refresh"/>
</ButtonGroupComponent>

^ Это то, что я получаю из приведенного выше кода.

То, чего я хочу достичь, - это способ для меня изменить радиус границы первого и последнего элемента так, чтобы они имели изогнутую границу.Это должно быть динамическим, так как этот стиль будет зависеть от того, сколько дочерних элементов buttonItem мы отображаем.

Я должен также упомянуть, что я использую стилевые компоненты для css каждой кнопки.

Answer 1

Я приведу здесь небольшой пример, я еще не тестировал его, но вы можете попробовать:

const StyledButtonGroupComponent = styled(
     ({ willBeStyled, children, ...rest }) =>(
       <ButtonGroupComponent {...rest}>{children}</ButtonGroupComponent>
    ))`

    ${props => React.Children.toArray(props.children).length <= props.willBeStyled && `
     ...first child, last child styles go here...
    `}

    `

Answer 2

здесь вы можете использовать первый и последний дочерний псевдоселектор css.в вашем компоненте напишите следующий код.

const ButtonGroupComponent= styled.div`
     button:first-child {
         border-top-left-radius: 3px;
         border-bottom-left-radius: 3px;
     }
     button:last-child {
         border-top-right-radius: 3px;
         border-bottom-right-radius: 3px;
     }
 `;

и выполните функцию рендеринга следующим образом

<ButtonGroupComponent>
  <buttonItem caption="Nothing"/>
  <buttonItem caption="Something" disabled={true}/>
  <buttonItem caption="Refresh"/>
</ButtonGroupComponent>

посмотрите это demo