TX004

<Text> 안에 중첩된 <Box>

콘솔

Text.js error TX004: <Box> cannot be nested inside <Text>.

발생 원인

<Text>는 연속된 인라인 텍스트를 배치하며, Flexbox 컨테이너를 포함할 수 없어요. <Box>(또는 <Spacer>나 <Divider>처럼 <Box>를 렌더링하는 컴포넌트)가 <Text> 안에서 렌더링됐어요.

해결 방법

<Box>를 밖으로 옮기고 형제 텍스트 요소를 가로로 나란히 배치하세요:

// Before<Text>  Status: <Box><Text color="green">ok</Text></Box></Text>// After<Box flexDirection="row">  <Text>Status: </Text>  <Text color="green">ok</Text></Box>

<Text>는 중첩해도 괜찮아요. 인라인 스팬으로 렌더링돼요.