スタイリッシュなコンポーネント：スマートラッパーコンテナ

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に2つの子があるような感じです。 1つは100pxの長さで、もう1つは200pxの長さです。親の長さは200ピクセルになります。

Answer 1

私の質問を考えてみて、私は子要素の幅を計算する必要はないことに気付きました。

代わりに、以下のコードで中央揃えにしました。

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

ラブリー結果、右？