React+TS中如何为Styled Components首个子面板设置更小margin-top？

这里有几种可行的方式实现需求，按需选择即可：

方案一：给第一个面板直接传first props #

既然StandardPanel已经定义了first类型的props，直接在组件内部根据props调整样式，然后在使用时给第一个面板传入该参数：

修改StandardPanel的样式：

export const StandardPanel = styled.div<{ first?: boolean }>`
  margin-top: ${props => props.first ? '10px' : '45px'};
`

父组件中使用：

const ParentComponent = () => {
  return (
    <Root>
      <StandardPanel first={true}>第一个面板</StandardPanel>
      <StandardPanel>第二个面板</StandardPanel>
      <StandardPanel>第三个面板</StandardPanel>
    </Root>
  )
}

方案二：用CSS选择器自动选中第一个子元素 #

不需要给组件传props，直接通过CSS的:first-child或:first-of-type选择器选中Root下的第一个StandardPanel，修改其margin-top：

const Root = styled.div`
  ${StandardPanel} {
    margin-top: 45px;
  }
  // 选中Root下的第一个StandardPanel子元素
  ${StandardPanel}:first-child {
    margin-top: 10px;
  }
`

这种方式更简洁，适合纯结构上第一个面板需要特殊样式的场景，无需手动传参。

方案三：动态列表渲染时判断索引 #

如果面板是通过循环动态生成的，可以根据索引判断是否为第一个，传入first props：

const panelList = ['面板内容1', '面板内容2', '面板内容3'];

const ParentComponent = () => {
  return (
    <Root>
      {panelList.map((content, index) => (
        <StandardPanel 
          key={index} 
          first={index === 0}
        >
          {content}
        </StandardPanel>
      ))}
    </Root>
  )
}

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