样式组件：智能包装容器

Question

首先，对于含糊不清的标题感到抱歉。

我试图制作一个带标签的微调器。

我的微调器组件如下所示。

const rotate360 = keyframes`
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
`

const Circle = styled.div`
    border: 5px solid ${({ theme }) => theme.color.grey};
    border-radius: 50%;
    border-top-color: #fff;
    width: ${({ size }) => size}px;
    height: ${({ size }) => size}px;
    animation: ${rotate360} 1s ease-in-out infinite;
`

const Label = styled.p`

`

const Wrapper = styled.div`
    // I'm not sure what to add here...
`

const Spinner = ({
    size,
    text
}) => {
    return (
        <Wrapper>
            <Label>{text}</Label>
            <Circle size={size} />
        </Wrapper>
    )
}

我的问题是如何让我的Wrapper组件知道子元素的宽度而不做任何不方便的Refs并使组件变大。

我的观点是计算父母的每个孩子的宽度，然后比较它们，最后让最长的孩子成为父母的宽度。

如果一个父母div有两个孩子就好了。一个长度为100px，另一个长度为200px。那么父母的长度将是200px。

Answer 1

想想我的问题，我意识到我不必计算子元素的宽度。

相反，我只是通过下面的代码使它们居中对齐。

const Wrapper = styled.div`
    display: block;
    padding: 1em;
    text-align: center;
    & > ${Circle} {
        margin: auto;
        margin-bottom: 20px;
    }
`

可爱的结果，对吧？