Styled-components multiple Pseudo Elements

Question

Sorry I never post here so not sure if this question is asked correctly..

I've been trying to figure out how to do styling like this but cant figure out how that works with styled components..

Can someone nudge me in the right direction?

How can I do something like this with ReactJS & Styled-components?

figure.container .square:before,
figure.container .square:after,
figure.container .square div:before,
figure.container .square div:after {
  /* styling */
}
figure.container .square:before,
figure.container .square:after {
  /* styling */
}
figure.container .square div:before,
figure.container .square div:after {
  /* styling */
}
figure.container .square:before,
figure.container .square div:before {
  /* styling */
}
figure.container .square:after,
figure.container .square div:after {
  /* styling */
}

This is my jsx-structure:

<Figure>
  <Square>
    <div></div>
  </Square>
</Figure>

Given that your CSS selectors are referring to HTML hierarchy we'd also need to see your ([mcve]) html. Also, could you clarify what you mean when you say "*styled components*"? — David Thomas, Oct 14 '18 at 11:42
@DavidThomas styled components is a React.js CSS-in-JS library :) — Colin Ricardo, Oct 14 '18 at 11:44

score 3 · Answer 1 · answered Oct 14 '18 at 11:54

Considering you can omit .container in the css selector, this should work fine

const Square = styled.div`
  :before, 
  :after,
  div:before, 
  div:after {
    background-color: white;
    position: absolute;
    content: "";
    display: block;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }

  :before,
  :after {
    width: 65%;
    height: 2px;
    background-color: white;
  }

  div:before,
  div:after {
    width: 2px;
    height: 65%;
  }

  :before,
  div:before {
    left: 0;
    top: 0;
  }

  :after,
  div:after {
    bottom: 0;
    right: 0;
  }
`;

But just in case if you want one-to-one conversion

const Figure = styled.div`
  ${Square}:before, 
  ${Square}:after,
  ${Square} div:before, 
  ${Square} div:after {
    background-color: white;
    position: absolute;
    content: "";
    display: block;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }

  ${Square}:before,
  ${Square}:after {
    width: 65%;
    height: 2px;
    background-color: white;
  }

  ${Square} div:before,
  ${Square} div:after {
    width: 2px;
    height: 65%;
  }

  ${Square}:before,
  ${Square} div:before {
    left: 0;
    top: 0;
  }

  ${Square}:after,
  ${Square} div:after {
    bottom: 0;
    right: 0;
  }
`;

Styled-components multiple Pseudo Elements

1 Answers1

Linked