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;

Example​

Example