Override specific component`s child div with styled-components on layout page

Question

I have layout page component where all other components divs are having rule overflow-y: hidden applied. Rules are applied with use of styled-components.

I want one specific (named "Filters") component`s child div to be visible.

I tried something like this:

  > div {
    overflow-y: hidden;
    grid-area: right;
  }

  > ${Filters} {
    cursor: pointer;
    && div {
      overflow-y: visible;
    }
  }

But it doesnt work, and I see no solution in documentation (or i am blind). Any ideas how to target these divs and override overflow-y: hidden rule ?

Answer 1

I have managed to temporary bypass the problem using tag "span" instead of "div" in filters component. Not the most elegant way, but it works.

Answer 2

Your code should be like this:

${Filters} {
   cursor: pointer;
   div {
     overflow-y: visible;
   }
}

or while declaring the Filters div, do it in the following way:

const Filters = styled.div`
    cursor: pointer;
   div {
     overflow-y: visible;
   }
`;