styleCallbacks Mapping Guide

This guide helps you find where to apply your old styleCallbacks customizations in the new CLI component files.

Threaded Comments

Old Callback	New Location
`commentContainer`	`single-comment/single-comment.tsx` - main div style
`authorName`	`single-comment/single-comment.tsx` - author span
`authorAvatar`	`single-comment/single-comment.tsx` - avatar img
`commentBody`	`single-comment/single-comment.tsx` - body div
`commentBodyText`	`single-comment/single-comment.tsx` - text paragraph
`voteButton`	`single-comment/vote-buttons.tsx` - button styles
`voteButtonUpvote`	`single-comment/vote-buttons.tsx` - upvote button
`voteButtonDownvote`	`single-comment/vote-buttons.tsx` - downvote button
`voteScore`	`single-comment/vote-buttons.tsx` - score display
`replyButton`	`single-comment/reply-button-and-info.tsx` - button style
`threadingLine`	`single-comment/indentation-threading-lines.tsx` - line divs
`indentation`	`single-comment/indentation-threading-lines.tsx` - spacing
`newCommentForm`	`new-comment-form.tsx` - form container
`newCommentTextarea`	`new-comment-form.tsx` - textarea element
`newCommentButton`	`new-comment-form.tsx` - submit button
`modal`	`modals/comment-menu-modal/comment-menu-modal.tsx`
`modalBackground`	`modals/comment-menu-modal/modal-background.tsx`

Old Callback	New Location
`commentContainer`	`comments-feed/single-comment.tsx` - main div
`authorName`	`comments-feed/single-comment.tsx` - author span
`commentBody`	`comments-feed/single-comment.tsx` - body div
`heartButton`	`comments-feed/heart-button.tsx` - button
`heartButtonFilled`	`comments-feed/heart-button.tsx` - filled state
`likeCount`	`comments-feed/heart-button.tsx` - count display
`replyButton`	`comments-feed/reply-button.tsx` - button style
`newCommentForm`	`new-comment-form.tsx` - form container
`sortButton`	`sort-by-button.tsx` - sort button styles

Example: Applying Old Customization

Before (npm package with styleCallbacks)

styleCallbacks={{
  authorName: (theme) => ({
    color: '#9333EA',
    fontSize: '16px',
    fontWeight: 'bold'
  })
}}

After (CLI component - edit source file)

Open src/components/comments-threaded/components/single-comment/single-comment.tsx:

// Find the author name element
<span style={{
  color: '#9333EA',      // Your custom color
  fontSize: '16px',      // Your custom size
  fontWeight: 'bold'     // Your custom weight
}}>
  {author.name}
</span>

Overview

Installation

Component Types

Threaded Comments

Social Comments

Notification Control

Customization

Migration

Legacy (Deprecated)

Callback Mapping Guide

styleCallbacks Mapping Guide

Threaded Comments

Example: Applying Old Customization

Before (npm package with styleCallbacks)

After (CLI component - edit source file)

Next Steps

Migration Guide

Customization

​styleCallbacks Mapping Guide

​Threaded Comments

​Social Comments

​Example: Applying Old Customization

​Before (npm package with styleCallbacks)

​After (CLI component - edit source file)

​Next Steps

Migration Guide

Customization

styleCallbacks Mapping Guide

Threaded Comments

Social Comments

Example: Applying Old Customization

Before (npm package with styleCallbacks)

After (CLI component - edit source file)

Next Steps