款式组件:智能包装容器
问题描述:
首先,抱歉的模糊标题。款式组件:智能包装容器
我试图让一个微调器有一个标签。
而我的微调器组件是像下面。
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。