🐜

Ant DesignのButtonコンポーネントの文字列の間に謎のスペースが入る話とその解決策

2021/10/29に公開

結論

それはバグではなく。仕様です。
適切なpropsを与えて解除できます。

import { ConfigProvider } from 'antd'

<ConfigProvider autoInsertSpaceInButton={false}>
    {children}
</ConfigProvider>

コードを追いながら簡易ログ的に書きました。
雑なのは許してください。

関連file
./components/button/button.tsx
./components/button/style/index.less

下記のコードの部分を見ると、childrenが1つで、iconが無く、ボーダーの枠線のtypeの指定の場合、「なにか」を挿入するフラグがtrueになるみたいです。

「先程の挿入するフラグ」と「漢字2文字」を判定する正規表現のフラグがtrueであれば、また別の「なにか」のフラグのReact Stateをtrueにセットします。

buttonに適用されるclassNameが下記です。
なるほど、先程のhasTwoCNCharだけではフラグは足りない見たいですね。

余談ですが、hasTwoCNCharって"has two Chinese character"の略ですかね？

./components/button/style/index.lessのファイルのcssを見てみましょう。

letter-spacingが適用されているみたいです。
これはspaceじゃ無いですね…。
そもそも今回はcssどころか文字列の半角スペースが入って居たんですよね。

居た！このspaceChildren()が怪しいぞ！
名前からして明らかにspace突っ込んでるのがわかる！

spaceChildren()の中でinsertSpace()を呼び出して、その返り値を返却しています。
こいつが原因だったのか…。

今までのコードを読んできた限り、どうやらautoInsertSpaceをfalseにできたらOKらしい！

しかし、貴様…。一体どこでfalseにできるんだ？

なんとアントデザインのButtonコンポーネントのFAQに記載がありました。

上記の後、コードを追っていくとConfigContextのautoInsertSpaceInButtonをfalseにしろと言われて、下記のリンクにたどり着きました。

propsに普通にあるやん。

import { ConfigProvider } from 'antd'

<ConfigProvider autoInsertSpaceInButton={false}>
    {children}
</ConfigProvider>

OSSのコードを読むのは面白い！
ただ、後で「ドキュメントに書いてあったんかーい！！」となることも多いので、公式ドキュメントはしっかり読もう！