How to add a custom class to an element

This article explains how to modify an element’s className by creating an override. This approach is useful when you need to apply a custom class for styling or targeting purposes.

Create an override

To add a custom class, you’ll need to use an override that modifies the element’s className property. Overrides let you extend or adjust an element’s behavior without changing its core structure.

Write the override code

Use the override to append a custom class to the existing className. Always include a leading space so the new class is separated correctly.

import type { ComponentType } from "react";

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

import type { ComponentType } from "react";

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

import type { ComponentType } from "react";

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

Once applied, the element’s rendered HTML will include the additional class, similar to the example below:

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

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

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

After adding the override:

1. Publish your project in Framer.

2. Open your site in a browser.

3. Use the browser’s web inspector to select the element.

4. Confirm that the custom class appears in the element’s class attribute.

Important notes

• This method works best for small, targeted adjustments.

• Extensive manual modifications can limit the level of support Framer can provide if issues arise.