React でカスタムコンポーネントの props に CSS のプロパティを使う

やりたいこと

カスタムコンポーネントを使う際に、style の要素を props に含めたいケースがありました。
イメージとしては下記の通りです。

// Custom Box Component
<MyBox flex={1} flexDirection="row">...</MyBox>

例えば Flexbox に関するスタイルの場合、 React Native だと @types に FlexStyle があるので、そちらを import してあげれば事足りる。 参考

React の場合にうまくやる方法があるか探していたのですが、見つけたので自分への備忘も兼ねて残しておきます。

実装方法

CSSProperties を用います。
下記が実装サンプルです。

import React, { CSSProperties } from "react"

type Props = CSSProperties

export const MyBox = React.forwardRef(
  ({ children, ...props }: Props, ref) => (
    <div
      ref={ref}
      style={{
        display: "flex",
        ...props,
      }}
    >
      {children}
    </div>
  )

props から style を除去したい場合、下記のように型を定義してあげることで実現可能です。

import { Box as MuiBox } from "@material-ui/core"
import { CSSProperties } from "react"

type Props = Omit<React.ComponentProps<typeof MuiBox>, keyof CSSProperties | 'style'> & CSSProperties

まとめと書簡

TypeScript は便利です。
built-in の組み込み関数を使いこなせば、再定義しなくても型を定義できるのでメンテナンス性が上がると感じます。

まだまだ知らない便利な機能が多いので、公式ドックやいろんな記事に目を通して使えるようにしていきたいところです。

もし皆さんがご存知な便利な機能があれば是非是非シェアお願いします！