我在一个flex容器中有3个样式化的组件，第二个和第三个没有正确的边距。它们有一个额外的样式，其边距覆盖了StyledDiv中的边距，但我不知道为什么。
我有一个这样的样式组件

const StyledComponent = (): JSX.Element => {
// assume all divs are flex
  return (
    <StyledDiv>
      <SomeComponent />
    </StyledDiv>
  )
}
const BorderStack = styled.div<{ isExistingWorkflow: boolean }>`
  margin: 1rem;
  padding: 1.5rem;
  width: 100%;
  border: 1px solid #d5dadf' ;

另一个里面装着这些东西：

const Component = (): JSX.Element => {
  return (
    <div>
      <StyledComponent />
      <StyledComponent />
      <StyledComponent />
    </div>
  )
}

如果我把margin属性放到div中，就像<div style={{margin: '1rem'}}>这样，就不会有问题了。在DOM中，第一个StyledComponent是这样的：

然后下面两个StyledComponent有一个额外的样式：

为什么样式化的组件要添加带有边距的额外样式？