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 for making adjustments, but please note that we may not be able to provide extensive support if you delve too deeply.

The goal is to create an element like the one below:

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

Then, 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 see that the element has the "test" class added to it.