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

Question

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

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

 &: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;
   }
`

Answer 1

有两种解决方法。我在这个 link 中实现了两种解决方案，一个是将第二个 child 的背景设置为黑色，另一个是将第三个 child 的背景设置为蓝色。

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

重要的一点是您在第一个示例中缺少 & 和 child 标识符之间的 space。应该是这样的：

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

space的区别与传统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 中定义规则，而不是在 parent 中定义规则。这样你就可以跳过奇怪的继承内容并直接应用样式。所以在 AccountMenuItem 中你只需要这个：

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

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

Problem accessing styled component nth-child

reactjs

styled-components