はじめに

material-uiの勉強をした時にサンプルコードにshouldForwardPropが良く出てきたので調べた結果を備忘録としてまとめておく。

shouldForwardPropとは？

shouldForwardPropとはstyled-componentsに対して渡されたpropsをDOM要素にまで伝播させるかを指示するために使用する機能のこと。

例えば以下のようにshouldForwardPropが未指定の場合、DOM要素までpropsが伝播されることはない
(デフォルトではpropsをDOMに伝播させないようになっている)

import styled from "@emotion/styled";

const MyBox = styled("div")`
`;

export default function App() {
  return (
    <MyBox prop1="hoge" />
  );
}

しかし、以下のようにコードを変更する。

import styled from "@emotion/styled";

const MyBox = styled("div", {shouldForwardProp: (prop) => prop === "prop1"})`
`;

export default function App() {
  return (
    <MyBox prop1="hoge" />
  );
}

そうするとDOM要素までpropsが伝播されるようになる。

最後に

コンポーネントを経由させずに直接DOMに渡したい時に使うのかな？という感じ。
ただmaterial-uiのサンプルコードではデフォルトではDOMに伝播させないにもかかわらず、敢えて prop !== "open" のように判定して使用しているのでどちらかというと明示性のために使用しているのかも。

詳しいかた教えていただけると幸いです。