React emoji-picker-react Apple样式仅组件内生效，外部显示异常求助

我正在开发React应用，使用emoji-picker-react组件并将emojiStyle设置为'apple'。组件内的表情可正常显示Apple样式，但将选中的表情在textarea或div中展示时，却显示系统原生字体样式。我希望在整个React应用中统一使用Apple风格的表情，而非系统默认样式，请问这是什么原因？该如何解决？

相关代码：

import React, { useRef } from 'react'
import EmojiPicker from 'emoji-picker-react'

const ChatBox = () => {

     const messageRef = useRef(null);
    
     const handleEmojiClick = (e) => { 
        if(messageRef.current){ 
            console.log(e) 
            messageRef.current.value += e.emoji 
        }
     }
    
     return (
    
         <EmojiPicker 
              className='emojiComponent' 
              height={350} width={400} 
              emojiStyle='apple'       
              suggestedEmojisMode='recent' 
              previewConfig={{ showPreview : false }} 
              searchDisabled onEmojiClick={(e) => handleEmojiClick(e)}
         /> 
    
         <textarea ref={messageRef} />
    
         <div>{messageRef.current.value}</div>
    
     )

}

• emoji-picker-react的emojiStyle='apple'仅控制选择器内部的表情渲染逻辑，组件是通过自身封装的样式或CDN图片来展示Apple风格表情。
• 你通过e.emoji获取的是Unicode表情字符，这类字符在textarea、div等原生元素中显示时，会由操作系统默认的emoji字体渲染（比如Windows用Segoe UI Emoji、安卓用Google Noto Color Emoji），因此无法保持Apple样式。

方案1：插入Apple风格表情图片（推荐） #

放弃使用Unicode字符，改为插入对应Apple风格表情的图片标签。组件onEmojiClick返回的参数包含unified字段，可用来拼接Apple表情的CDN资源地址。

修改后的代码示例：

import React, { useState } from 'react'
import EmojiPicker from 'emoji-picker-react'

const ChatBox = () => {
    // 用state存储富文本内容，替代textarea的纯文本限制
    const [messageContent, setMessageContent] = useState('');

    const handleEmojiClick = (e) => {
        // 构建Apple风格表情的CDN图片URL
        const appleEmojiUrl = `https://cdn.jsdelivr.net/npm/emojibase-data@7.0.0/images/apple/64/${e.unified}.png`;
        // 插入图片到内容中
        setMessageContent(prev => 
            prev + `<img src="${appleEmojiUrl}" alt="${e.emoji}" style="width:16px;height:16px;vertical-align:middle;" />`
        );
    }

    return (
        <div>
            <EmojiPicker 
                className='emojiComponent' 
                height={350} width={400} 
                emojiStyle='apple'       
                suggestedEmojisMode='recent' 
                previewConfig={{ showPreview : false }} 
                searchDisabled 
                onEmojiClick={handleEmojiClick}
            /> 
            {/* 改用contenteditable的div作为输入区域，支持渲染图片 */}
            <div 
                contentEditable
                style={{ border: '1px solid #ccc', padding: '8px', minHeight: '100px', marginTop: '10px' }}
                dangerouslySetInnerHTML={{ __html: messageContent }}
                onInput={(e) => setMessageContent(e.currentTarget.innerHTML)}
            />
            {/* 展示区域 */}
            <div style={{ marginTop: '10px', padding: '8px', border: '1px solid #eee' }}
                dangerouslySetInnerHTML={{ __html: messageContent }}
            />
        </div>
    )
}

export default ChatBox;

说明：

• textarea仅支持纯文本，无法渲染图片，因此改用contenteditable属性的div作为输入区域
• 利用e.unified拼接Apple表情的CDN地址，确保所有展示的表情都是Apple风格
• 通过dangerouslySetInnerHTML渲染富文本内容，同时监听输入事件同步内容到state

方案2：使用Apple风格emoji字体覆盖（局限性较大） #

如果坚持使用Unicode字符，可以尝试引入支持Apple表情的字体，但存在以下限制：

• 多数系统未预装Apple官方的San Francisco字体，需引入开源替代字体
• 字体文件体积较大，会影响页面加载速度

实现步骤：

1. 下载开源Apple风格emoji字体（如Apple Color Emoji的开源复刻版本），放入项目静态资源目录
2. 在CSS中引入字体并设置给目标元素：

@font-face {
    font-family: 'AppleEmoji';
    src: url('/fonts/AppleColorEmoji.ttf') format('truetype');
}

.emoji-display {
    font-family: 'AppleEmoji', sans-serif;
}

3. 给输入和展示元素添加类名：

<textarea ref={messageRef} className="emoji-display" />
<div className="emoji-display">{messageRef.current?.value}</div>

注意：该方法无法保证在所有系统和浏览器中完美生效，字体渲染仍受系统环境限制。

内容的提问来源于stack exchange，提问作者Bablu Personal