如何为非首个渲染的Styled Component实例添加CSS样式

方案1：通过index传参显式控制（最稳定，不受渲染逻辑影响） #

直接利用map循环的index参数，给StyledButton传递自定义props控制样式，完全规避CSS选择器命中失败的问题：

1. 先修改StyledButton的样式定义，接收isFirstRow参数：

const StyledButton = styled(Button)`
  margin-top: 14px;
  /* 非首行的按钮应用你需要的样式 */
  ${props => !props.isFirstRow && `
    /* 此处填写你需要应用的样式，例如要隐藏可写display: none; */
  `}
`;

2. 渲染按钮的时候传入isFirstRow参数：

<StyledButton
  type="link"
  buttonStyle="LINK"
  name="delete"
  dataId={`delete-${enteredObject.key}-${index}`}
  isOberonIcon
  isIconButton
  icon="bin"
  onClick={() => onRemove(enteredObject)}
  isFirstRow={index === 0} // 新增这行参数
>
  <Message id="Form.Button.Remove" defaultMessage="Remove" />
</StyledButton>

方案2：修正CSS选择器实现命中 #

之前CSS命中失败大概率是选择器逻辑错误，因为每行只有1个删除按钮，要排除的是首行的按钮而非按钮队列里的第一个，正确写法如下：
首先给StyledButton加一个固定类名，避免styled-components动态生成类名影响选择：

<StyledButton
  className="delete-row-btn"
  // 其余原有属性保持不变
>

然后编写CSS规则：

/* 选中除第一个属性行之外的所有删除按钮 */
.attributeset-row:not(:first-of-type) .delete-row-btn {
  /* 此处填写你需要应用的样式 */
}

方案3：首行直接不渲染删除按钮 #

如果你的需求就是首行不能删除，直接在渲染阶段判断index即可，不会生成多余DOM节点，性能最优：

{/* 仅index大于0时渲染删除按钮 */}
{index > 0 && <StyledButton
  type="link"
  buttonStyle="LINK"
  name="delete"
  dataId={`delete-${enteredObject.key}-${index}`}
  isOberonIcon
  isIconButton
  icon="bin"
  onClick={() => onRemove(enteredObject)}
>
  <Message id="Form.Button.Remove" defaultMessage="Remove" />
</StyledButton>}

内容的提问来源于stack exchange，提问作者cts