How to add a custom class to an element

Sometimes you want to manually modify an element that’s generated by Framer, like the class attribute for a div. This can be handy if you want hack around, but beware that we can’t really help you as much when you go too deep.

The goal here is to have an element like:

<div class="framer-abc123 test"> ... </div>

Start by creating an override.

Now create an override that modifies the [className](<https://reactjs.org/docs/faq-styling.html>) from props to add “test”. Make sure to add a space in the beginning as classes need to be separated with spaces.

import type { ComponentType } from "react" 

export function withClass(Component): ComponentType { 
  return (props) => { 
    props.className += " test" // Remember to add a space 
    return <Component {...props} /> 
  } 
}

Now click publish and you’ll see that the “test” class is added to the element: