时间戳

首页 > 解决方案 > 样式化的组件样式应该放在组件树的什么位置？

css - 样式化的组件样式应该放在组件树的什么位置？

问题描述

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

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

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

我应该将一个道具传递给 List，然后这个组件应该将它传递给 ListItem，以便我可以在 ListItem 中包含一组样式吗？

或者

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

标签： cssstyled-components

解决方案

似乎你可以不在这里传递 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

推荐阅读