className in code components doesn't seem to be working

Developer Support
#1

Plasmic Team,

We’d like to pass CSS properties defined in Plasmic Studio to a registered Code Component.

We’re passing className, however, it doesn’t appear that the nested children are inheriting the className.

I’ve attached a gif, where you can see that the vertical box is nested in the registered code component’s slot, it’s not accepting the size properties. When I change the context, it works well.

Hope you can help! Thanks guys!

upload_plasmic.gif

#2

Hmm does UploadWrapper itself render any DOM elements?

#3

I’m not able to nest any elements directly under UploadWrapper

UploadWrapperNesting.gif

#4

Could you share the code for upload wrapper?

#5 
import * as React from "react";
import { Upload } from "antd";
import { UploadOutlined, StarOutlined } from "@ant-design/icons";
import { ReactNode } from "react";
import { UploadFile } from "antd/lib/upload/interface";

export interface UploadWrapperProps {
  className: string;
  accept: string;
  name: string;
  removeIcon?: ReactNode | ((file: UploadFile) => ReactNode);
  showRemoveIcon?: boolean;
}

export function UploadWrapper(props: UploadWrapperProps) {
  const showUploadList = {
    showRemoveIcon: !props.showRemoveIcon,
    removeIcon: props.removeIcon,
  };

  return (
    <Upload
      className={props.className}
      accept={props.accept}
      name={props.name}
      showUploadList={showUploadList}
      {...props}
    ></Upload>
  );
}

Here is the whole UploadWrapper

#6

Hmm it looks like antd’s Upload component is has a span wrapper, which is receiving the css class name; you may have to fix this by doing something like…

.ant-upload-root > .ant-upload {
  height: 100%;
}

function UploadWrapper(props) {
  return <Upload className={`ant-upload-root ${props.className}`} />;
}