🔥

MuiのStyled()でWarning: React does not recognize the `HOGE`が出た時の対処法

2022/06/22に公開

React

mui

styled

tech

環境

react18
next12
MUI5

何が起きたか？

styled-componentのスタイルの部分だけで使いたいPropsをよくわからないまま使った結果下記の警告が発生。

 Warning: React does not recognize the `drawerWidth` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `drawerwidth` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

DOMに〇〇なんて属性ないんですけど、使わないなら除外してもらえますか？（意訳）的な警告

結論

Styleの中で使いたい変数をプロパティとして渡すなら、DOMの属性ではないことをshouldForwardPropを使って明示してあげる必要がある。

SampleMain.tsx

import { styled } from "@mui/material/styles";

const LayoutMain = styled("main", {
 shouldForwardProp: (prop) => prop !== "open" && prop !== "drawerWidth",
})<{
 open?: boolean;
 drawerWidth: number;
}>(({ theme, open, drawerWidth }) => ({
 flexGrow: 1,
 padding: theme.spacing(3),
 transition: theme.transitions.create("margin", {
   easing: theme.transitions.easing.sharp,
   duration: theme.transitions.duration.leavingScreen,
 }),
 marginLeft: `-${drawerWidth}px`,
 ...(open && {
   transition: theme.transitions.create("margin", {
     easing: theme.transitions.easing.easeOut,
     duration: theme.transitions.duration.enteringScreen,
   }),
   marginLeft: 0,
 }),
}));
LayoutMain.defaultProps = {
 open: false,
 drawerWidth: 240,
};
export default LayoutMain;

SamplePageWithLayout.tsx

~
<LayoutMain open={open} drawerWidth={240}/>
~

sytled-componentに対してPropsを渡すときには、スタイルの中だけでしか使わないPropがどれで、DOMまで伝える必要があるPropがどれなのか明示的に示してあげる必要があり、通過させるPropとさせないPropのフィルター的役割を担っているのがshouldForwardProp(prop)になっている。
https://mui.com/system/styled/

shouldForwardPropは利用箇所で記載されているPropのキーがPropertyKeyという型（実質String）で一つずつ入ってくるので通過させたい場合にはTrueを、させない場合にはFalseを返すような処理を記載してあげれば良い。
＊等価演算子の比較ではなくarr.includes()で判定したら型チェックで失敗。調べたところPropertyKeyが文字列以外になることなんてないんだがか直したらどうかという議論があった模様

環境

何が起きたか？

結論

Discussion