EmojiMart をカスタマイズする [Techblog#25]

かわいい絵文字ピッカーを導入してみました

Slack ではお馴染みですね

導入してみたページです。キーボードアイコンをクリックすると表示されます

私事ですが macOS Sonoma 14.5 あたりから絵文字キーボードの調子が悪くなり恋しくなったので取り付けてみました

React (Next.js) 環境であればインストールは簡単で、以下でインストールできます

yarn add emoji-mart @emoji-mart/data @emoji-mart/react

ところで、このコンポーネントは Shadow DOM で構成されています

Shadow DOM とは、コンポーネントに意図しない外部の CSS があたらないようにするための仕組みです

(恥ずかしながら、私も初めて知りました 🙃)

そのため、カスタマイズする場合には単純にセレクタを指定するだけではダメでした

ひとまず devTools で覗くと、ピッカーの DOM は以下のようになっています

<div>  <em-emoji-picker>    #shadow-root (open)    ...  </em-emoji-picker></div>

このピッカーの場合は CSS 変数を用いて一部定義されているので、配色については以下を上書きすることで変更できそうです (他にもあるかもです)

Shadow DOM 内部の CSS 変数を上書きするには、トップにあるem-emoji-picker に対して指定します

ここでは変数名が rgb から始まっているものについては RGB の割合をカンマ区切りで指定する仕様のようです

em-emoji-picker {  --rgb-accent: 0, 175, 222;}

変数名が color の場合は、通常通りの CSS の色指定方法で指定になります

em-emoji-picker {  --color-border: #fff4c9;  --color-border-border: #ffd54c;}

これで、自分好みの配色に変更できました 🎉