样式化组件：如何定位直接子组件？

Question

我在文档中看到 & 选择器用于嵌套定位。但以下不起作用。此处使用的正确语法是什么？

const InlineContainer = styled.div`
  display: flex;

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

Answer 1

请试试这个

const InlineContainer = styled.div`
  display: flex;

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

Answer 2

作为 CSS 值，字符串 "40px" 无效，而值 40px 有效。

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;
  }
`;

样式化组件：如何定位直接子组件？

Styled Components: How to target direct children?

reactjs

styled-components