MUI 自定义主题样式

目录结构

- /
  - themes
    - light.tsx
  - index.tsx

组件页面

index.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import Router from './routes'
import reportWebVitals from './reportWebVitals';

// Begin 关键配置
// 自定义主题
import { ThemeProvider } from "@mui/material/styles"
import { themeLight } from './themes/light'
// End 关键配置

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={ themeLight }> // 向组件注入样式
      <Router />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

样式配置

themes/light.tsx

import { createTheme } from '@mui/material/styles'

import { ThemeOptions } from '@material-ui/core/styles/createMuiTheme';

export const light: ThemeOptions = createTheme({
  palette: {
    primary: {
      main: '#ff0000'
    }
  };
});

typescript 可能需要声明文件，与 light.tsx 放一起，但我这边没用上
light.d.ts

declare module '@mui/material/styles' {
  interface Theme {
    palette: {
      primary: {
        main: string
      }
    };
  }
  // 允许配置文件使用 `createTheme`
  interface ThemeOptions {
    palette?: {
      primary?: {
        main?: string
      }
    };
  }
}