Framer: Custom CSS in overrides

In Framer overrides you can’t directly “attach a CSS file”, but you can inject CSS into the page from the override.

Option 1 (best): Inject a <style> tag once

import type { ComponentType } from "react"

let injected = false

export function withClass(Component): ComponentType {
    return (props) => {
        if (!injected) {
            const style = document.createElement("style")
            style.innerHTML = `
                .slide {
                    transform: translateY(20px);
                    opacity: 0;
                    transition: all 0.6s ease;
                }

                .slide.is-visible {
                    transform: translateY(0px);
                    opacity: 1;
                }
            `
            document.head.appendChild(style)
            injected = true
        }

        return (
            <Component
                {...props}
                className={(props.className || "") + " slide"}
            />
        )
    }
}