Understanding how to pass prop overrides in code

Developer Support
1

(I am using vscode with typescript & NextJs)

I just made a single div component with plasmic and I try to pass the style props to it. But it gives me an error and I find very weird cases.

The name of component I made is “testComp”.

• Case 1
<PlasmicTest
testComp={{
style: { height: 300 },
}}
/>
…ERROR
————————————————————

If I pass any other props with style, then it works.

• Case 2
<PlasmicTest
testComp={{
style: { height: 300 },
className: “??” <— anything
}}
/>
…NO ERROR
————————————————————

And this works also.

• Case 3 in testComp.tsx
export interface TestCompProps extends DefaultTestCompProps {
style?: React.CSSProperties;
}
…NO ERROR
———————————————————

Can someone explains why this happens?

2

For codegen, the props you pass to testComp must be the props that are defined in TestCompProps, because you are intentionally curating the API of your components. So in this case, case 3 is the way to go

3

The why is because you are using TYPESCRIPT which is STRICKTER than common Javascript, where you can have a comma at the end of an element array like [1,2,3,]; with Typescript, comma’s are only between elements.