Skip to main content

Editable CSS

All styles can be made editable in the Design Editor, using the editableCSS property in Register Vev component.

editableCSS is an array containing the following properties.

Name/typeDescription
selector
string
Any used CSS selector. Also supports CSS modules.
property
Array
Any CSS property as a string.

Example

my-component.js
import React from "react";
import { registerVevComponent } from "@vev/react";
import styles from "./my-component.module.scss";

const MyComponent = ({ title }) => {
return (
<div className={styles.wrapper}>
<h1 className={styles.title}>{title}</h1>
</div>
);
};

registerVevComponent(MyComponent, {
name: "My awesome component",
editableCSS: [
{
selector: styles.wrapper,
properties: ["background-color", "border-radius"],
},
{
selector: styles.title,
properties: ["color"],
},
],
});

export default MyComponent;