Search code examples
cssreactjsstyled-components

React Styled Component space between components

I have several styled components in a row with a image. I just need to add a space between HeaderLinks. I've tried following way but it doesn't work.

const HeaderLink = styled.a`
  color: #000;
  font-size: 1.5em;
`;

const Wrapper = styled.div`
  HeaderLink + HeaderLink {
      margin-left: 1em;
  }
`;

HeaderLink1|HeaderLink2|Image|HeaderLink3|HeaderLink4

So I want to add margin between HeaderLink1&HeaderLink2 and HeaderLink3&HeaderLink4. How can I use styled component in styled css?

Solution

  • Just used ${HeaderLink} instead of HeaderLink.