Problem accessing styled component nth-child

Question

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

Doesn't `` wrap your component in an ``? So this wouldn't even work on normal CSS either, right? — Raicuparta, Aug 05 '19 at 07:33
I had already thought about it, but even removing the links the problem still continues, with pure css I would get the result easily, but styled component got complicated. I removed Link so as not to cause confusion, but I'm still without an answer, for now I manually assembled the list, and changed the items I needed, but this is not something I like to do, I like to do something dynamic. — Chance, Aug 05 '19 at 12:01
Does not work, had tried so too. The biggest problem is that estyled component defines an id and a specific class for each component and so somehow you must relate it when using nth-child. In this [answer](https://stackoverflow.com/questions/48713421/target-child-element-styled-components) here it worked, but for me there is no result. — Chance, Aug 05 '19 at 13:32
Can you get me an example of your problem on codesandbox.io or something similar? I'm almost certain I can help you but it's hard without working code — Raicuparta, Aug 05 '19 at 13:40
Yes of course, I will create it and already edit the question. — Chance, Aug 05 '19 at 13:42

score 3 · Accepted Answer · answered Aug 05 '19 at 14:13

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;
  }

Well, as much space as you can, thanks for the help. – Chance Aug 05 '19 at 14:24 — Chance, Aug 05 '19 at 14:24

Problem accessing styled component nth-child

1 Answers1