starter-portfolio-cara: Can't pass new props from MDX to ProjectCard

[dhrumilp15]

Description

I created a new file for project-card.tsx using shadowing and want to pass a new name prop from MDX to a ProjectCard component. However, the name prop the project card receives is undefined and I have no idea why.
Am I misunderstanding how to shadow components?

Steps to reproduce

I'm using the theme for a personal website (https://github.com/dhrumilp15/dhrumilp15.github.io).

1. Create a new project-card.tsx file and rewrite the props to include a new field.
   i.e.

type ProjectCardProps = {
	link: string;
	title: string;
	children: React.ReactNode;
	bg: string;
};

const ProjectCard = ({ link, title, children, bg }: ProjectCardProps) {...}

becomes

type ProjectCardProps = {
	link: string;
	title: string;
	children: React.ReactNode;
	bg: string;
        name: string;
};

const ProjectCard = ({ link, title, children, bg, name }: ProjectCardProps) {...}

2. Create a new projects.mdx file and pass a value for the name to a ProjectCard component.
   Ex:

<ProjectCard
	title="wonderful component"
	link="https://github.com/..."
	bg="linear-gradient(to right, #D4145A 0%, #FBB03B 100%)"
	name="NAME HERE"
>
	Description
</ProjectCard>

I've also added an `import ProjectCard from '../components/project-card'; at the top of that file.

(I'll create a test branch for this issue on my repository.)

Expected result

The value for name passed from each component in projects.mdx is not undefined in ProjectCard.

Actual result

The value for name passed from each component in projects.mdx is undefined in ProjectCard.

Environment

  System:
    OS: Windows 10 10.0.19041
    CPU: (8) x64 Intel(R) Core(TM) i7-4710MQ CPU @ 2.50GHz
  Binaries:
    Node: 14.15.4 - C:\Program Files\nodejs\node.EXE      
    Yarn: 1.22.4 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.10 - C:\Program Files\nodejs\npm.CMD        
  Languages:
    Python: 3.7.9
  Browsers:
    Chrome: 88.0.4324.190
    Edge: Spartan (44.19041.423.0), Chromium (88.0.705.74)
  npmPackages:
    gatsby: ^2.32.0 => 2.32.0
    gatsby-cli: ^2.19.0 => 2.19.0
    gatsby-image: ^2.4.15 => 2.4.16
    gatsby-plugin-google-analytics: ^2.1.8 => 2.3.13
    gatsby-plugin-manifest: ^2.2.6 => 2.4.23
    gatsby-plugin-mdx: ^1.2.34 => 1.2.34
    gatsby-plugin-netlify: ^2.1.6 => 2.3.13
    gatsby-plugin-offline: ^2.2.7 => 2.2.10
    gatsby-plugin-sharp: ^2.6.27 => 2.6.27
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.10 => 1.1.12
    gatsby-remark-images: ^3.3.25 => 3.3.25
    gatsby-source-filesystem: ^2.3.24 => 2.3.24
    gatsby-transformer-remark: ^2.8.28 => 2.8.28
    gatsby-transformer-sharp: 2.3.16 => 2.3.16
  npmGlobalPackages:
    gatsby-cli: 2.19.0

[2018kguo]

Hey there, I had this issue and figured out how to resolve it. As mentioned in the readme, you have to shadow the file components.js within src/gatsby-plugin-theme-ui. Within your own directory this goes here:

These are the contents of my revised components.js that allows new props:

[LekoArts]

I've added the spreading of the props to the new major release that I'll publish: #599

Then you don't have to shadow the components file