款式组件：智能包装容器

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> 
    ) 
} 

我的问题是如何使我的包装部件知道子元素未做任何参考文献这是不方便的，使成分更大的宽度。

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

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

Answer 1

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

相反，我只是让它们按照下面的代码进行中心对齐。

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

可爱的结果，不是吗？