Simple Inclusion of CSS in Framer via a Code Component

SimpleFramerCSS.tsx

import { addPropertyControls, ControlType } from "framer"
import { motion } from "framer-motion"

// Learn more: https://www.framer.com/docs/guides/code-components/
async function importStylesheets(id, css) {
    let styleElement = document.createElement("style")
    styleElement.id = "customStyleSheet"
    styleElement.innerHTML = String.raw`${css}`
    document.head.appendChild(styleElement)
    console.log(styleElement)
}

export default function SimpleFramerCSS(props) {
    const { css, style } = props
    const id = `${props.id}_styleSheet`
    console.log(props)

    if (!document.getElementById(id)) {
        importStylesheets(id, css)
        console.log("Stylesheets loaded")
    } else {
        console.log("Stylesheets already loaded")
    }

    // "...style" enables switching between auto & fixed sizing
    // Learn more: https://www.framer.com/docs/guides/auto-sizing
    return (
        <motion.div style={{ ...style, ...containerStyle }}>{css}</motion.div>
    )
}

SimpleFramerCSS.defaultProps = {
    css: `* {
        border: 1px solid green !important;
    }`,
}

// Learn More: https://www.framer.com/docs/property-controls/
addPropertyControls(SimpleFramerCSS, {
    css: {
        title: "Text",
        type: ControlType.String,
        displayTextArea: true,
    },
})

const containerStyle = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden",
}