Chakra UIのButton要素中でoverflow-wrap:"break-word"が効かない

はじめに

Chakra UIのButtonコンポーネント中でoverflow-wrap:"break-word"を使用した改行が効かず詰まったため、備忘録としてまとめておきます。

使用環境

Next@12.1.0
@chakra-ui/react@1.8.6

書いたコード

次のようなコードで、Chakra UIのButtonコンポーネント中で文字列の改行を試みたところ、なぜか効きませんでした。

sample.tsx

import { Button, Text } from "@chakra-ui/react";
import { NextPage } from "next";

const Sample: NextPage = () => {
    return (
        <Button w="200px" h="200px">
            <Text overflowWrap="break-word">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</Text>
        </Button>
    )
}
export default Sample

結果

ググってみると「max-widthを設定すれば直る」「display:"flex"があると改行できない」などの原因を挙げている方が散見されましたが、どの方法もダメでした。

原因

Buttonコンポーネントに設定されていたwhite-space:"nowrap"が原因でした。そこで、コードを次のように修正したところ、想定した動作が得られました。

import { Button, Text } from "@chakra-ui/react";
import { NextPage } from "next";

const Sample: NextPage = () => {
    return (
-        <Button w="200px" h="200px">
+        <Button w="200px" h="200px" whiteSpace="unset">
            <Text overflowWrap="break-word">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</Text>
        </Button>
    )
}
export default Sample

結果