css - 带样式的组件样式应该位于组件树中的什么位置？

Question

在样式化的组件环境中，假设我有:

<Header>
  <List ...>
    <ListItem ... />
    <ListItem ... />
    <ListItem ... />
  </List>
</Header>

而且我想为 ListItem 设置一些样式，这些样式仅在该组件在 Header 中使用时才应用。

我是否应该将 prop 传递给 List，然后该组件将其传递给 ListItem，以便我可以在 ListItem 中包含一组样式？

或者

我应该在 Header 中设置 ListItem 的样式吗，因为它们是只会使用一次的样式，我不想让 ListItem 弄脏整个应用程序中可能发生的所有可能性。另外，我无权访问呈现的 ListItem 组件，因为它们是由 List 呈现的。

Answer 1

似乎您可以在此处不传递 prop:它可以单独使用 CSS 特性来处理。例如，您可以为列表项添加相应的类名，这将告诉 Header 样式的组件选择器为其应用样式，如下所示:

const HeaderWithClassNameSpecificity = styled.div`
  .inside-header { // apply this to Header children with className="inside-header"
    background: salmon;
  }
`;

您的列表项将如下所示:

 <ListItem className="inside-header" />

另一种方法是根据标签名称的特殊性来设置 Header 子项的样式，您的 Header 将是

const HeaderWithTagNameSpecificity = styled.div`
  ul li {  // apply this to Header children which are <li> items inside <ul>
    background: salmon;
  }
`;

因此您不需要将 className 添加到 ListItem，前提是它是一个“li”项，它是“ul”的子项。

这两种方法之间的选择将取决于您的整体应用程序架构，但请记住，基于类的特异性在浏览器性能方面更合适(当您有许多相同的标签和相当复杂的标签选择器时，应考虑CSS)。

在此处查看概念证明:https://codesandbox.io/s/wy35njlmyl