Material UI 自定义 (TypeScript)

在Material UI中，我们可以通过创建自定义主题来覆盖默认样式。以下是一个使用TypeScript定制Material UI组件样式的例子：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { purple, green } from '@mui/material/colors';
 
// 创建自定义主题
const customTheme = createTheme({
  palette: {
    primary: {
      main: purple[500],
    },
    secondary: {
      main: green[500],
    },
  },
});
 
// 在应用程序的根组件中包裹ThemeProvider，使主题全局可用
function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* 应用的其余部分 */}
    </ThemeProvider>
  );
}
 
export default App;

在这个例子中，我们创建了一个自定义主题，将主色调设置为紫色，副色调设置为绿色。然后，我们通过ThemeProvider组件将这个主题提供给整个应用程序，这样我们就可以在应用中使用这些自定义颜色了。