Skip to main content

​
styleCallbacks Mapping Guide

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

​
Threaded Comments

Old CallbackNew Location
commentContainersingle-comment/single-comment.tsx - main div style
authorNamesingle-comment/single-comment.tsx - author span
authorAvatarsingle-comment/single-comment.tsx - avatar img
commentBodysingle-comment/single-comment.tsx - body div
commentBodyTextsingle-comment/single-comment.tsx - text paragraph
voteButtonsingle-comment/vote-buttons.tsx - button styles
voteButtonUpvotesingle-comment/vote-buttons.tsx - upvote button
voteButtonDownvotesingle-comment/vote-buttons.tsx - downvote button
voteScoresingle-comment/vote-buttons.tsx - score display
replyButtonsingle-comment/reply-button-and-info.tsx - button style
threadingLinesingle-comment/indentation-threading-lines.tsx - line divs
indentationsingle-comment/indentation-threading-lines.tsx - spacing
newCommentFormnew-comment-form.tsx - form container
newCommentTextareanew-comment-form.tsx - textarea element
newCommentButtonnew-comment-form.tsx - submit button
modalmodals/comment-menu-modal/comment-menu-modal.tsx
modalBackgroundmodals/comment-menu-modal/modal-background.tsx

​
Social Comments

Old CallbackNew Location
commentContainercomments-feed/single-comment.tsx - main div
authorNamecomments-feed/single-comment.tsx - author span
commentBodycomments-feed/single-comment.tsx - body div
heartButtoncomments-feed/heart-button.tsx - button
heartButtonFilledcomments-feed/heart-button.tsx - filled state
likeCountcomments-feed/heart-button.tsx - count display
replyButtoncomments-feed/reply-button.tsx - button style
newCommentFormnew-comment-form.tsx - form container
sortButtonsort-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>

​
Next Steps

Migration Guide

Full migration walkthrough

Customization

Learn about customization