访问样式化组件 nth-child 时出现问题答案

【问题标题】：Problem accessing styled component nth-child访问样式化组件 nth-child 时出现问题
【发布时间】：2019-12-12 11:17:39
【问题描述】：

对不起，我的英语不好。我在访问样式组件中的菜单子项时遇到了一些困难。这是我要访问AccountMenuItem子项的组件，我想对第一个和最后一个子项应用更高的高度，但是我无法访问方式和方式。

CodeSandbox

我尝试了很多选项，但无济于事：这些是最后的。

 &:nth-child(2) ${AccountMenuItem} {
    height: 80px;
  }
 &${AccountMenuItem}:nth-child(2) {
    height: 80px;
 }

<AccountMenu>
  {menuItems.map((item, indice) => {
    return (          
        <AccountMenuItem key={indice}>
          <MenuImage src={item.icon} alt={item.text} />
          <MenuItem>{item.text}</MenuItem>
        </AccountMenuItem>
    )
  })}
</AccountMenu

const AccountMenuItem = styled.span`
  height: 40px;
  color: ${props => props.theme.primary[100]};
  display: flex;
  align-items: center;
  text-decoration: none;
  background-color: ${props => props.theme.TextPalette[100]};
  &:hover {
    background-color: rgba(131, 0, 196, 0.05);
    font-weight: bold;
  }
`
const AccountMenu = styled.div`
  display: inline-block;
  visibility: hidden;
  position: absolute;
  bottom: -240px;
  width: 198px;
  right: 0;
  z-index: 99999;
  text-decoration: none;
  background-color: #f1f1f1;
  border-bottom: 5px solid ${props => props.theme.primary[100]};
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  @media only screen and (min-width: 720px) {
    left: -55px;
    bottom: -240px;
  }
  &:hover {
    visibility: visible;
  }
  &::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 90%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #12ff92 transparent;
    @media only screen and (min-width: 720px) {
      margin-right: 0;
      height: 120px;
      left: 50%;
    }
  }
   &:nth-child(2) ${AccountMenuItem} {
     height: 80px;
   }
`

【问题讨论】：

<Link> 不是将您的组件包装在 <a> 中吗？所以这甚至不适用于普通的 CSS，对吧？
我已经考虑过了，但是即使删除链接问题仍然存在，使用纯 css 我会很容易得到结果，但是样式组件变得复杂。我删除了链接以免造成混乱，但我仍然没有答案，现在我手动组装列表，并更改了我需要的项目，但这不是我喜欢做的事情，我喜欢做一些动态的事情.
:nth-child(2) 现在应该可以工作了，不是吗？
不行，也试过了。最大的问题是 estyled 组件为每个组件定义了一个 id 和一个特定的类，因此在使用 nth-child 时必须以某种方式关联它。在这个answer 中它起作用了，但对我来说没有结果。
你能给我一个你在codesandbox.io或类似的问题上的例子吗？我几乎可以肯定我可以帮助你，但没有工作代码很难

标签： reactjs styled-components

【解决方案1】：

对此有两种解决方案。我在此链接中实现了两种解决方案，一种是将第二个孩子的背景设置为黑色，另一种是将第三个孩子的背景设置为蓝色。

代码：https://codesandbox.io/s/determined-tree-0l1hs

重要的是您在第一个示例中缺少& 和孩子的标识符之间的空格。应该是这样的：

// v-- Space here!!
  & ${AccountMenuItem}:nth-child(3) {
    background: blue;
  }

空格的区别和传统CSS的这个区别是一样的：

.account-menu.account-menu-item // means an element that has both classes
.account-menu .account-menu-item // means the second element is a descendant of the first

我更喜欢的另一种方法是在 AccountMenuItem 中定义规则，而不是在父项中定义它。这样您就可以跳过奇怪的继承内容并直接应用样式。所以在 AccountMenuItem 中你只需要这个：

  &:nth-child(2) {
    background: black;
  }

【讨论】：

好吧，尽可能多的空间，感谢您的帮助。