如何在使用主题时将道具传递给样式组件？

// 主题文件（Theme.js）
import React from 'react';

const ThemeContext = React.createContext();

const ThemeProvider = ({ children, propName }) => {
  return (
    <ThemeContext.Provider value={propName}>
      {children}
    </ThemeContext.Provider>
  );
};

export { ThemeProvider, ThemeContext };

// 样式组件（StyleComponent.js）
import React, { useContext } from 'react';
import { ThemeContext } from './Theme';

const StyleComponent = () => {
  const propName = useContext(ThemeContext);

  return (
    <div style={{ color: propName }}>
      This is a styled component.
    </div>
  );
};

export default StyleComponent;

// 使用示例（App.js）
import React from 'react';
import { ThemeProvider } from './Theme';
import StyleComponent from './StyleComponent';

const App = () => {
  const propName = 'blue'; // 传递给主题的道具值

  return (
    <ThemeProvider propName={propName}>
      <StyleComponent />
    </ThemeProvider>
  );
};

export default App;