css - 样式化组件 : smart Wrapper container

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 有两个子 div。一个长度为 100px，另一个长度为 200px。那么父级的长度将是 200px。

Answer 1

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

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

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

可爱的结果，对吧？