使用MUI访问样式化组件内的属性

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const customProp = 'Custom Prop Value';

  return (
    <ChildComponent customProp={customProp} />
  );
}

export default ParentComponent;

// ChildComponent.js
import React from 'react';

function ChildComponent(props) {
  const { customProp } = props;

  return (
    <div>{customProp}</div>
  );
}

export default ChildComponent;

// CustomContext.js
import React from 'react';

const CustomContext = React.createContext();

export default CustomContext;

// ParentComponent.js
import React from 'react';
import CustomContext from './CustomContext';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const customProp = 'Custom Prop Value';

  return (
    <CustomContext.Provider value={customProp}>
      <ChildComponent />
    </CustomContext.Provider>
  );
}

export default ParentComponent;

// ChildComponent.js
import React, { useContext } from 'react';
import CustomContext from './CustomContext';

function ChildComponent() {
  const customProp = useContext(CustomContext);

  return (
    <div>{customProp}</div>
  );
}

export default ChildComponent;