Help center

Developers

How to add a custom class to an element

Search

How to add a custom class to an element

Sometimes, you may want to manually modify an element generated by Framer, such as the class attribute for a div. This can be useful if you want to make adjustments, but please note that we may not be able to provide as much support if you go too deep.

The goal here is to have an element like:

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

Create an override that modifies the className in the props by adding "test". Remember to include a space at the beginning since classes should be separated by 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 open the web inspector. You will notice that the element has the "test" class added to it.