Custom Classes

Override default styles using the customClasses prop.

Basic Usage

Use the customClasses prop to override default CSS classes for different parts of the editor:

<HeliosEditor
  value={content}
  onChange={setContent}
  customClasses={{
    wrapper: "border-2 border-purple-300 rounded-xl",
    toolbar: "bg-purple-50 border-purple-200",
    contentArea: "bg-white min-h-64",
    button: "hover:bg-purple-100",
  }}
/>

Available Custom Classes

wrapper

Styles applied to the main editor wrapper container.

string (optional)

toolbar

Styles applied to the toolbar container.

string (optional)

contentArea

Styles applied to the editor content area.

string (optional)

button

Styles applied to toolbar buttons.

string (optional)

Example: Custom Styled Editor

<HeliosEditor
  value={content}
  onChange={setContent}
  height="h-96"
  width="max-w-4xl"
  customClasses={{
    wrapper: "border-2 border-purple-300 rounded-xl",
    toolbar: "bg-purple-50 border-purple-200",
    contentArea: "bg-white min-h-64",
    button: "hover:bg-purple-100",
  }}
  uploadConfig={{
    uploadApiUrl: process.env.REACT_APP_UPLOAD_URL,
    clientId: process.env.REACT_APP_CLIENT_ID,
    clientSecret: process.env.REACT_APP_CLIENT_SECRET,
  }}
/>

Tips

Use Tailwind CSS classes for consistent styling
Combine with the default styles rather than completely replacing them
Test your custom classes across different screen sizes
Consider dark mode compatibility when adding custom styles