款式組件：智能包裝容器

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

可愛的結果，不是嗎？