反应，风格的componetns。传递样式和创建组件的最佳方法

Question

我最近开始使用React。在我的上一个项目中，我们为它们创建了组件和容器，还创建了主题（我们使用了样式组件）。看起来像这样

<Container>
    <Button type={small}>Button</Button>
</Container>

在我当前的项目中，有一个名为“ layout”的组件，它可以接受几乎所有CSS属性作为道具。

flex-direction: ${(p) => p.flow};
  flex-wrap: ${(p) => p.wrap};
  padding: ${(p) => `${p.padding}`};
  margin: ${(p) => `${p.margin}`};
  ${(p) => p.width && css`
    width: ${p.width}
  `};
  ${(p) => p.height && css`
    height: ${p.height};
  `};
  ${(p) => p.justify && css`
    justify-content: ${p.justify}
  `};
  ${(p) => p.align && css`
    align-items: ${p.align}
  `};
  ${(p) => p.gap && css`
    & > * + * {
      margin-${marginDir}: ${p.gap}rem;
    }
  `};

  ${(p) => p.shrink && css`
    & > * + * {
      flex-shrink: ${p.shrink};
    }
  `};
  and so on

它们使用它来创建容器。另外，其他组件也可以通过类似的道具获得CSS属性

letter-spacing: ${({ letterSpacing }) => letterSpacing};
text-align: ${({ align }) => align};
text-decoration: ${({ decoration }) => decoration};

请帮助我了解哪种方式更好地创建组件。通过props传递CSS属性是一种好习惯吗？