CODEWITHSUNDEEP
reactjsstyled-components
Chance
Chance

Reputation: 1654

Problem accessing styled component nth-child

Sorry for my bad English. I have some difficulty accessing the children of a menu in styled component. This is my component I want to access the AccountMenuItem children, I want to apply a higher height to the first and last children, but I can not access the way and the way.

CodeSandbox

I tried many options, but to no avail: These are the last ones.

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

Upvotes: 0

Views: 5340

Answers (1)

Raicuparta
Raicuparta

Reputation: 2115

There are two solutions to this. I have implemented both solutions in this link, one by setting background of the second child to black, and another by setting the background of the third child to blue.

Code: https://codesandbox.io/s/determined-tree-0l1hs

The important bit is that you were missing a space between & and the child's identifier in your first example. It should be like this:

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

The difference of the space is the same as this difference in traditional 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

The other way to do this, which I prefer, is just define the rule in the AccountMenuItem instead of defining it in the parent. That way you can skip the weird inheritance stuff and apply the style directly. So in AccountMenuItem you just need this:

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

Upvotes: 3

Related Questions