如何在类组件的react导航中使用自定义主题

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

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#ff0000', // 设置主题的主要颜色
    },
    secondary: {
      main: '#00ff00', // 设置主题的次要颜色
    },
  },
});

export default theme;

import React from 'react';
import { ThemeProvider } from '@material-ui/core/styles';
import theme from './theme'; // 引入自定义主题文件
import Navigation from './Navigation'; // 导航组件

class App extends React.Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <Navigation />
      </ThemeProvider>
    );
  }
}

export default App;

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { AppBar, Toolbar, Typography } from '@material-ui/core';

const styles = (theme) => ({
  appBar: {
    backgroundColor: theme.palette.primary.main, // 使用主题的主要颜色
  },
  title: {
    flexGrow: 1,
  },
});

class Navigation extends React.Component {
  render() {
    const { classes } = this.props;

    return (
      <AppBar className={classes.appBar}>
        <Toolbar>
          <Typography variant="h6" className={classes.title}>
            My Navigation
          </Typography>
        </Toolbar>
      </AppBar>
    );
  }
}

export default withStyles(styles)(Navigation);