Using CSS in Framer X component

framer-x-with-css.tsx

// Here is a basic Framer X component where we use CSS directly

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

// Define type of property
interface Props {
    width: number
    height: number
}

const css = `
      body {
        margin: 0;
      }
      h4 {
        font-size: 20px;
        margin: 0;
        padding: 0;
      }
      p {
        margin: 0;
        padding: 0;
      }
      .test {
          background: red;
          height: 100%;
          display: flex;
      }`;

export class test extends React.Component<Props> {

    static defaultProps = {
        width: 960,
        height: 70,
    }

    render() {
        return (
            <div className="test">
                <h4>I am a framer X component</h4>
                <p>I am a framer X component</p>
                <style>{css}</style>
            </div>
        )
    }
}