如何将Material-ui的组件设置为亮/暗原色？我使用的是像这里这样的自定义主题

npm install @material-ui/core @material-ui/styles
# 或者对于 MUI v5
npm install @mui/material @emotion/react @emotion/styled

import { createTheme, ThemeProvider } from '@mui/material/styles';

// 创建一个自定义主题
const theme = createTheme({
  palette: {
    primary: {
      main: '#你的亮原色', // 例如 '#3f51b5'
    },
    secondary: {
      main: '#你的暗原色', // 例如 '#f50057'
    },
    // ...其他颜色配置
  },
  // ...其他主题配置
});

export default theme;

import React from 'react';
import ReactDOM from 'react-dom';
import theme from './path-to-your-theme';
import App from './App';

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

import { makeStyles } from '@mui/styles';

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.secondary.main,
  },
}));

function MyComponent() {
  const classes = useStyles();
  return <div className={classes.root}>Hello, World!</div>;
}

export default MyComponent;