Having trouble using the Ant component in Plasmic

Plasmic Studio Questions
1

We’re having some trouble using the antd input as a Plasmic component.

We need to have unique props at each instantiation, while retaining styling throughout the app.

What’s the method for creating a dark variant with a different background color at the component level, so all instances of the dark variant have the same background color, without having to change each instance? If we don’t convert antd select to a slot target, we can’t have unique props. If we do, then the background color changes across all variants.

After we’ve converted the component to a Slot Target; If we change the background to black it styles the base variant. If we choose to style the slot target instead, it doesn’t allow us to edit the background color.

Screen Shot 2022-01-19 at 8.32.12 AM.png
Screen Shot 2022-01-19 at 8.32.12 AM.png2290×1792 267 KB

2

Hi @parliamentary_trout,
I think the way to go for it is to create a wrapper component around Antd Input and have the wrapper component a Dark variant. Then use the wrapper component across the project.
PFA.

3

In the code, we can simply pass on all the props from the AntdInputWrapper to Antd Input.

4

We can have unique props for each instance by linking the Antd Input props to the wrapper component AntdInputWrapper.

It will help us override the props at instance level while retaining the styling of dark variant.

5

That’s a reasonable work-around.

It’s just nice as a designer to have the appropriate and unique prop values set at each instantiation in Plasmic Studio to ensure it is designed to look like the final product.

I’d still love Plasmic to review this.

6

@parliamentary_trout Can you create a Global Variant to do this? When a Dark global variant is set, then all components with overrides for that global variant will show those overrides

7

@yang We are using a Global Variant

8

@parliamentary_trout You’re saying, you want to not need to set the variant on individual instances, right? And Asim’s video shows adding a normal variant

9

You should be able to use a global variant instead - does that work for you?

10

We want to use the Global Variant, it just doesn’t appear to be working. When we create a slot target for the Antd Input, and change the background-color on the Dark Variant to Black, it changes the base variant as well. (Yes, we’re recording the Dark Variant)

Project ID: 58CNSVogj92RP9LTu21UrC
Component: Input

Screen Shot 2022-01-19 at 11.14.24 AM.png
Screen Shot 2022-01-19 at 11.14.24 AM.png3822×1858 538 KB

11

Do you mean you made the Antd Input into the component’s default slot contents?

Slot default contents can’t be varianted, since they can be entirely replaced in any instance and are really controlled from outside

12

Yes.

Ok. I thought it would be nice to be able to create a component that would maintain styling across an app, but allow the prop values to be unique.

Thank you

13

Yes you can do that, I’m just saying I think you were only unable to variant an element because you made it a default slot content. Why do you need to make it into a slot? (Slot contents can be completely replaced any time.)

14

I think that’s what I shared in the above video. You can allow the props to be unique on each instance and maintain the same styling across each instance.

The way to link the props to the wrapper component is by right-clicking it and link to component.

I can share a sample video to demonstrate it.

15