Reactjs styled-具有道具时的组件无法获取主题颜色

import React from 'react';

// 创建主题上下文组件
const ThemeContext = React.createContext();

// 主题上下文提供者组件
const ThemeProvider = ({ children }) => {
  const theme = {
    color: 'blue', // 主题颜色
    // 其他主题属性...
  };

  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
};

// 具有道具的组件
const StyledComponent = ({ prop }) => {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <div style={{ color: theme.color }}>
          {prop}
        </div>
      )}
    </ThemeContext.Consumer>
  );
};

// 应用程序组件
const App = () => {
  return (
    <ThemeProvider>
      <StyledComponent prop="Hello World" />
    </ThemeProvider>
  );
};

export default App;