🐡

ChakraUIでTextコンポーネントをinlineにしたい

2024/11/18に公開

ChakraUIのTextコンポーネントを使うと文字が改行される。文章中にTextコンポーネントを使いたいとき、これでは無駄に改行されてしまいレイアウトが崩れる。
対策としては、as='span'プロパティを使えばいい。

<Box>
  Do occaecat cupidatat incididunt eiusmod commodo aliqua aliquip ea. 
  Adipisicing tempor in incididunt velit quis laboris laborum laborum.
  <Text as='span'>
   Excepteur ut quis ea elit pariatur irure ad elit sunt commodo commodo 
   mollit duis.
  </Text>
  Aliqua dolor amet nisi duis eiusmod ex. Proident ex adipisicing labore 
  proident. Id ullamco ipsum qui anim ut est aliqua nisi voluptate irure 
  mollit deserunt.
</Box>

Discussion