CODEWITHSUNDEEP
reactjsstyled-components
Sean D
Sean D

Reputation: 4292

Styled Components: How to target direct children?

I saw in the docs that the & selector was used for nested targeting. But the following does not work. What is the correct syntax to use here?

const InlineContainer = styled.div`
  display: flex;

  & > * {
    margin-right: "40px";
  }
`;

Upvotes: 9

Views: 15108

Answers (2)

Jay
Jay

Reputation: 3107

Please try this

const InlineContainer = styled.div`
  display: flex;

  > * {
    margin-right: 40px;
  }
`;

Upvotes: 0

Dennis Vash
Dennis Vash

Reputation: 53874

As CSS value, the string "40px" is invalid where the value 40px does.

const FlexBox = styled.div`
  margin: 20px;
  padding: 20px;
  border: 1px solid palevioletred;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  > * {
    background-color: yellow;
    padding: 20px;
  }

  > div {
    border: 2px solid black;
  }
`;

Edit Q-58690167-DirectChildExample

Upvotes: 15

Related Questions