Overriding CSS Styles in Framer

Published

April 2, 2022

Framer’s canvas works quite a bit like you might be used to from other design tools. You get your infinite canvas, direct manipulation and a property panel for styling. The latter is where Framer differs: we try to give you access to CSS properties—not custom implementations. This is why you get borders, z-index, pointer events, and more. However, sometimes you might want sometimes new, something custom, something we don’t support just yet. Not to worry! See, you can attach a little bit of code to any layer in Framer via something we call "Overrides". This allows you to override any CSS property, too. Here’s how.

export function SetStyles(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                style={{
                    ...props.style,
                    borderRadius: 10
                }}
            />
        )
    }
}