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

在Material-UI中，你可以通过自定义主题来设置组件的亮/暗原色。以下是如何使用自定义主题来实现这一点的步骤：

步骤 1: 安装 Material-UI

确保你已经安装了@material-ui/core和@material-ui/styles（或者@mui/material和@emotion/react如果你使用的是MUI v5）。

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

步骤 2: 创建自定义主题

你可以创建一个自定义主题，并在其中定义亮/暗原色。以下是一个使用MUI v5的例子：

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

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

export default theme;

步骤 3: 应用自定义主题

在你的应用程序的最顶层组件中，使用ThemeProvider来应用自定义主题。

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')
);

步骤 4: 在组件中使用主题颜色

在你的组件中，你可以使用theme.palette来访问自定义的颜色。

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;