Nested onHover selector not working with styled-components

I think it doesn’t work because it’s not a child of the hovered element, so you could solve like this:

&:hover + ${TextStyled}   {
    color: red;
    display: block;
    
  }

Another way is put TextStyled into Logo like:

<Logo>Logo<TextStyled /></Logo>

And in logo const:

&:hover {
    color: red;

    ${TextStyled} {
      display: flex;
    }

edit after comment:

For resolve your problem create another div then put logo and textstyled into that.

<Cont>
      <Logo>Logo</Logo>
      <TextStyled />
    </Cont>

Then create rule:

const Cont = styled.div`
  width: 100%; // just example
  &:hover {
    ${TextStyled} {
      display: block;
    }
  }
`;

and Logo:

const Logo = styled.div`
  font-weight: 700;
  color: #ffffff;
  font-size: 4em;
  letter-spacing: 5px;
  transition: 0.25s;
  z-index: 200;

  &:hover {
    color: red;
    filter: blur(10px);
  }
`;