javascript - 在 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>

^ 这就是我从上面的代码中得到的。

我想要实现的是一种为第一个和最后一个元素设置边框半径样式的方法，使它们具有 flex 的边框。这必须是动态的，因为此样式将取决于我们渲染的子元素 buttonItem 的数量。

我还应该提到，我正在为每个按钮的 css 使用样式化组件。

Answer 1

你可以在这里使用 first 和 last 子 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