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/type	Description
selector string	Any used CSS selector. Also supports CSS modules.
property Array	Any of these CSS properties as a string: font-family, background, color, margin, padding, border, border-radius, opacity, filter.

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", "border-radius"],
    },
    {
      selector: styles.title,
      properties: ["color"],
    },
  ],
});

export default MyComponent;