In my project, I am working with Material UI and TypeScript. I have noticed that I need to declare the Theme interface and ThemeOptions in the same file for it to work properly. Is there a more efficient way to separate these declarations from the main tsx file?
import React from "react";
import ReactDOM from "react-dom";
import { createTheme } from "@mui/material";
import { orange } from "@mui/material/colors";
declare module "@mui/material/styles" {
interface Theme {
status: {
danger: string;
};
}
interface ThemeOptions {
status?: {
danger?: string;
};
}
}
const theme = createTheme({
status: {
danger: orange[500],
},
});
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);