はじめに
DataGridを使っていて、セルにBorderを適用させたかったのですが、
用意されていたプロパティ showCellRightBorder を設定しても割り当てられないとエラーが発生してしまいます。
<DataGrid rows={rows} columns={columns} showCellRightBorder={true} />上記のように設定しています。
「DataGridのPro版限定なのか？」と調べてみましたが、そういうわけでもなく…。
見落としていました。
結論：x-data-gridのバージョンで指定方法が変わった。
対処法
package.jsonで@mui/x-data-gridのバージョンを確認します。
私は、6系を使っていました。
6系からは showCellRightBorder や showCellLeftBorder というプロパティが削除され、
代わりに showCellVerticalBorder というプロパティが追加されました。
<DataGrid rows={rows} columns={columns} showCellVerticalBorder />上のように指定をしてあげれば、セルに線をつけることができます。
参考
おわりに
まだ最近の記事ですら、5系や4系が紹介されているのに、
7系のβ版もリリースされているので、定期的な見直しが必要ですね。
また、記事を頼るのもよいですが、バージョンや用法を把握するためにも
リファレンスをしっかり読むことが大切です。