Framer X Stack with design and code components

ImagePost.tsx

import * as React from "react";
import { Frame, Stack, PropertyControls, ControlType } from "framer";
import { Avatar, PostHeader, PostImage, PostButtonGroup } from "./canvas";

// Define type of property
interface Props {
  username: string;
  timeStamp: string;
  postText: string;
  width: number;
  height: number;
  postTextHeight: number;
  liked: boolean;
}

interface State {
  liked: boolean;
}

export class ImagePost extends React.Component<
  Partial<Props>,
  State,
  { width: number; height: number }
> {
  // Set default properties
  static defaultProps = {
    username: "username",
    timeStamp: "Now",
    postText: "Your text goes here."
  };

  // Items shown in property panel
  static propertyControls: PropertyControls<Props> = {
    username: { type: ControlType.String, title: "Username" },
    timeStamp: { type: ControlType.String, title: "Time Stamp" },
    postText: { type: ControlType.String, title: "Post Text" }
  };

  state: State = {
    liked: false
  };

  componentDidUpdate(prevProps) {
    if (prevProps.postText !== this.props.postText) {
      console.log(prevProps.postText);
    }
  }

  render() {
    const { username, timeStamp, postText, width, height } = this.props;

    return (
      <Stack
        direction="horizontal"
        distribution="start"
        alignment="start"
        gap={8}
        width={width}
        height={height}
        style={{ background: null, overflow: "hidden" }}
      >
        <Avatar />

        {/* right side, PostContainer */}
        <Stack
          direction="vertical"
          distribution="start"
          alignment="start"
          gap={0}
          width={"1fr"}
          {/* not the height I want but 'auto' ignores the PostText component */}
          height={height} 
          style={{
            background: "#333",
            overflow: "hidden",
            borderRadius: 8
          }}
        >
          {/* imported from design */}
          <PostHeader
            top={0}
            right={0}
            left={0}
            username={username}
            timeStamp={timeStamp}
          />

          {/* imported from design */}
          <PostImage left={0} right={0} />

          {/* coded component because I need the height to fit the text */}
          <PostText postText={postText} />

          {/* imported from design */}
          <PostButtonGroup left={0} right={0} />
        </Stack>
      </Stack>
    );
  }
}

// I have to hack the css of the frame to get it positioned correctly. Not sure why it keeps going to the top
const PostText = props => {
  const { width, height, postText } = props;
  return (
    <Frame style={postTextStyle}>
      <p style={{ margin: 0 }}>{postText}</p>
    </Frame>
  );
};

const postTextStyle: React.CSSProperties = {
  padding: "16px 16px 32px 16px",
  background: "white",
  color: "#666",
  fontSize: 16,
  lineHeight: 1.4,
  height: "auto",
  width: "100%"
  // top: 256 <-- I shouldn't need to do this
};

// const PostContainer = props => {
//   const { username, timeStamp, postText, width, height } = props;
//   return (
//     <Stack
//       direction="vertical"
//       distribution="start"
//       alignment="start"
//       gap={0}
//       width={300}
//       height={500}
//       style={{ background: "#333", overflow: "hidden", borderRadius: 8 }}
//     >
//       <PostHeader
//         top={0}
//         right={0}
//         left={0}
//         username={username}
//         timeStamp={timeStamp}
//       />
//       <PostImage left={0} right={0} />

//       <PostText postText={postText} />

//       <PostButtonGroup left={0} right={0} />
//     </Stack>
//   );
// };