如何在react中子组件中使用App.js文件的createMuiTheme函数中设置的颜色

import React from 'react';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#ff0000',
    },
    secondary: {
      main: '#00ff00',
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 其他组件 */}
    </ThemeProvider>
  );
}

export default App;

import React from 'react';
import { useTheme } from '@material-ui/core/styles';

function ChildComponent() {
  const theme = useTheme();

  return (
    <div>
      <div style={{ backgroundColor: theme.palette.primary.main }}>
        Primary Color
      </div>
      <div style={{ backgroundColor: theme.palette.secondary.main }}>
        Secondary Color
      </div>
    </div>
  );
}

export default ChildComponent;