MantineのBadgeにuppercaseを適用しないようにする

UI コンポーネントライブラリMantineのBadgeコンポーネントを使用しようとしたのですが、デフォルトで文字が uppercase になっており、props でも小文字指定ができないようでした。

そこで、forwardRef を使って下位コンポーネントにtext-transformを渡すことにしました。

import { Badge as MantineBadge, BadgeProps } from "@mantine/core";
import React, { forwardRef } from "react";
import { cloneElement } from "react";

export const Badge = forwardRef<
  HTMLDivElement,
  BadgeProps<"div"> & { transformUpper?: boolean }
>(({ sx, transformUpper, ...props }, ref) => {
  return cloneElement(<MantineBadge />, {
    sx: {
      ...sx,
      "text-transform": transformUpper ? "uppercase" : "none",
    },
    ref,
    ...props,
  });
});

Badge.displayName = "Badge";

これで、uppsercase にせずに Badge を表示できました。