Question

我有一个样式div，我希望所有孩子之间都有一些空间。由于子项可以是项目中的任何其他组件（按钮，div，段落等），因此无法在其中添加填充，因此我想找到一种从样式div本身中进行填充的方法。也没有说这个div有多少个孩子。有时它可以是空的，有时它可以有三个或四个孩子。

有没有办法做到这一点？

我已经尝试了几种方法，但是到目前为止没有任何效果。

这是现在的div：（美学样式在其父项中完成）

const StyledBox = styled.div`
    float: right;
    min-width: 50px;
`

此div是Header的一部分

const StyledParent = styled.div`
    width: 100%;
    min-height: 50px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
`

const StyledBottom = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    min-height: 65px;
`

const Header = (props) => {
    return (
        <StyledParent {...props}>
            <StyledTop {...props}>
            </StyledTop>
            <StyledBottom>
                <StyledBox {...props}></StyledBox>
            </StyledBottom>
        </StyledParent>
    )
}

Answer 1

您可以使用* css选择器为div中的任何元素设置样式：

const Div = styled.div`
 * {
   //style applied to every elements
  }
`;

要在每个变量之后添加空间，可以使用after伪类，如下所示：

const Div = styled.div`
  * {
    &::after {
      content: " "; //space inserted after each element
    }
  }
`

如何在div的所有子级之间

1 个答案: