我有 React 组件和样式化组件，它们在我的网站上使用。例如，按钮和卡片。我听说使用内联样式是一种代码气味，应该避免。
但是，为了使内容看起来美观，css(特别是边距，填充和尺寸(仍然需要根据具体情况应用于组件。
我可以看到许多选项：
- 创建复合组件，每个组件用于不同的地方，例如
Card, Card.Padded, Card.Large -
创建(可能几个(具有不同基于以下内容的新组件 使用样式化组件的"基本"组件，例如
styled(Card)创建卡片字符卡片主页等 -
使用道具在需要不同样式的地方更改样式 例如
<Card withSomeMargins />或<Card margin={big} /> -
在每个页面上使用不同的主题提供程序将样式应用于 组件
任何人都可以就哪些方法是"最佳实践"或首选提供任何建议吗？我知道不同的方法可能对不同的情况更好，可能没有"最佳"的方法，但我有兴趣听听人们的想法。
"最佳"方法是使用道具来更改样式。并不是因为一般来说，它是CSS-in-JS的更好实践，而是因为这是Styled Components设计的方法。当然，如果你发现你根据道具改变太多，你应该把它拆分成一个新的样式组件。所以答案是你的第二点和第三点的混合。
避免通过道具传递特定样式值之类的东西(如width="100%(，而是传递标志或对象键以从主题中获取所需的值。
此外，您可能会发现过多的道具插值会导致样式的可读性降低。这种方法可以使它变得更好一点：
export const Card = styled.div(({ theme, margin }) => css`
margin: ${margin ? theme.margin[margin] : 0};
font-family: ${theme.font};
font-size: ${theme.sizeBig};
color: ${theme.dark};
font-weight: ${theme.fontWeight}
`)