className in code components doesn't seem to be working

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!


Hmm does UploadWrapper itself render any DOM elements?

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


Could you share the code for upload wrapper?

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 (

Here is the whole UploadWrapper

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}`} />;