I’m having a typescript error, not sure if this belongs in issues or general - as things are working, just ts is complaining. I created a Component using the studio. The component has two slots and a named element. I’m able to override the named element, but typescript doesn’t seem to like it. Details in thread.
Here is what my component looks like. It has a slot target of label
and error
and the input field is a named element, named input
Inside my code (from codegen), when I display a page that has this component in it, it is showing me a type error. That page has that component as a named element, named name
.
This is what the code looks like
name={{
label: 'Store Name',
error: action?.errors?.name,
isError: !!action?.errors?.name,
input: { placeholder: 'override this with stuff' },
}}
This IS working, the placeholder on the input field is overwritten.
Anyone have suggestions?
Hello Dusty! For named elements, we don’t expose the prop in the skeleton component (the component you can change, for example: PlasmicButton
generates the skeleton component Button
). So to fix this, all you need to do is go to the skeleton component of the InputFormField
and expose a new prop there named input
and pass it as a prop to the PlasmicInputFormField
. Hope that helps!
Oh I see. I didn’t realize the PlasmicComponents referenced the skeleton components. I had considered deleting those files if I wasn’t using them, I guess I would have found out then.
Here is how I solved it and TS is happy
`
``
export interface FormInputFieldProps extends DefaultFormInputFieldProps {
input: PlasmicFormInputField__OverridesType['input']
}
Sounds good! You can edit all the props in the skeleton files to your need and it’s also in the skeleton components where you add logic/state to your plasmic components!