conditionally show after pseudo element react and styled components

Question

I am using react with styled components and I have a resizable panel and one of the panels contains an iframe. I was trying to fix a drag issue by using an after pseudo element and setting a backdrop-filter conditionally however having the after element always steals the click events. Is there a way to conditionally show the '&:after' element and not just the backdrop-filter?

export const IframeWrapper = styled(FlexColumn)`
  justify-content: flex-end;

  &:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    backdrop-filter: ${props => props.isDragging && 'blur(5px)'};
  }
`;

Sorry that link does not help. I mean specifically to conditionally render the &:after element — regexAgainstTheMachine, Feb 25 '21 at 17:15
Why it doesn't help? It does exactly what you are after - `conditionally render the &:after element`. — Mr T, Feb 25 '21 at 17:21
Sorry, my apologies. The answer you linked to didn't actually solve my issue but the one above it does so...close enough. I'll post my working code in case it helps anyone else. Thanks @MrT — regexAgainstTheMachine, Feb 25 '21 at 18:41

score 4 · Accepted Answer · answered Feb 25 '21 at 18:42

Working code with help from Mr T:


export const IframeWrapper = styled(FlexColumn)`
  justify-content: flex-end;

  ${({ isDragging }) => isDragging &&
    css`
      &:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        backdrop-filter: blur(5px);
      }
    `
  }
`;

conditionally show after pseudo element react and styled components

1 Answers1