steveruizok
9/16/2018 - 5:15 PM

framer_x_demo2.tsx

import * as React from "react";
import { PropertyControls, ControlType } from "framer";
import { css } from "emotion";

interface Props {
  text: string;
}

export class emotion_demo extends React.Component<Props> {
  // Set default properties
  static defaultProps = {
    bg: "#efefef"
  };

  // Items shown in property panel
  static propertyControls: PropertyControls = {
    bg: { type: ControlType.Color, title: "Background Color" }
  };

  render() {
    const myStyle = css`
      height: 100%;
      background-color: ${this.props.bg};
    `;

    return <div className={myStyle}>Hello world</div>;
  }
}