Is this possible passing function to mdx file ?

Hi, Doing a page with ChakraUI, I’ve struggling for the whole day trying to passing function to mdx file.

On the mdx file, I was trying to achieve something like

<Image
    src="xxx"
    borderColor={useColorModeValue('gray.300', 'gray.700')}
    borderWidth="1px"
    shadow="md"
    mb={8}
  />

The Image component here is the https://chakra-ui.com/docs/media-and-icons/image chakraUI component.

And here is how I passed the useColorModeValue function down(in tsx page):

import { useColorModeValue } from '@chakra-ui/react';

///...
const pageScecificComponent = {
  ...mdxComponents,
  useColorModeValue // I'm struggling here
};

export const getStaticProps: GetStaticProps = async () => {
  const postFilePath = path.join(POSTS_PATH, 'About.mdx');
  const source = fs.readFileSync(postFilePath);

  const { content, data } = matter(source);

  const mdxSource = await serialize(content, {
    // Optionally pass remark/rehype plugins
    mdxOptions: {
      remarkPlugins: [],
      rehypePlugins: [],
    },
    scope: data,
  });

  return {
    props: {
      source: mdxSource,
      frontMatter: data,
    },
  };
};

const Home: AppNextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({ source, frontMatter }) => {
  return <MDXRemote {...source} components={pageScecificComponent} />;
};

Everything was working fine if the useColorModeValue function on mdx file is not present. So, is there anyway I can do this, googling things through various example but everything I found was it implemented using next-mdx-enhanced (which I want to avoid).

I would appreciate even just some glue.

Thank you guys.

[khanhna]

I think you merged the scope property directly into the source object here on this line, rather than under the scope key:

const processedSource = { ...addingPropScope, ...theRest };

it would have to be instead:

const processedSource = { scope: addingPropScope, ...theRest };

I did exactly as you re-correct the code… and magic happened 👍

Now this syntax worked:

// Mdx File
<Note status="info" icon={FiActivity}>
  <p>
    Checking here {InvokeSample()}
  </p>
</Note>

Many thanks @jescalan, you made my day 🎉

[khanhna]

Thanks for a quick reply @payapula,

I was though that was possible, but seems like I would take this approach as long as I could find anything that more helpful.

And ofcourse this should work right away. Have a good day 🎉