MaterialUIで色の型補完が効くようにする（無理やり）

解決できること

色指定する時に「primary.main」「error.main」などのカラーテーマが出てこないのを改善します。

具体的にこういう場面

colorプロパティにprimary.mainを使いたいが…
↓ そもそもprimaryが出てきていない

解決策

createThemeの後にpaletteをエクスポートする。

theme.paletteにはパレットで設定したカラーが入っています。

// App.ts

import { createTheme, ThemeProvider } from "@mui/material";
import React from "react";
import { RouterProvider } from "react-router-dom";
import { router } from "./routers/router";

export const theme = createTheme({
    //　カスタムする場合、ここでパレットの色を設定
    palette: {
        primary: {
            main: "#EF6E6E",
        },
    }
});

    // themeのpaletteオブジェクトをエクスポート 
+ export const palette = theme.palette;

export const App: React.FC = () => {
    return (
        <ThemeProvider theme={theme}>
            <RouterProvider router={router} />
        </ThemeProvider>
    );
};

色を指定する時はpaletteをインポートして使っていく。

primary以外の色もpaletteから指定できるので多少は便利になった。

結論

MUIで色指定に型補完を付ける記事が見当たらなかったので、オレオレ実装してみました。(ChakraUIの型補完の記事はたくさんありました）

このやり方で問題ないのか、保守性は良いのか、そこら辺はワカランです。
そもそも他の書き方があるのかもしれません。

他のやり方があればコメントで教えて頂ければ幸いです。