emoji-picker-react style does not take effect

[waynecanfly]

css code:.button-container {
display: flex;
align-items: center;
color: white;
gap: 1rem;
.emoji {
position: relative;
svg {
font-size: 1.5rem;
color: #ffff00c8;
cursor: pointer;
}
.emoji-picker-react {
position: absolute;
top: -350px;
background-color: #080420;
box-shadow: 0 5px 10px #9a86f3;
border-color: #9a86f3;
.emoji-scroll-wrapper::-webkit-scrollbar {
background-color: #080420;
width: 5px;
&-thumb {
background-color: #9a86f3;
}
}

[Vishesh1903]

did you find a solution i am still stuckkkk

[Rishabh242002]

css code:.button-container { display: flex; align-items: center; color: white; gap: 1rem; .emoji { position: relative; svg { font-size: 1.5rem; color: #ffff00c8; cursor: pointer; } .emoji-picker-react { position: absolute; top: -350px; background-color: #080420; box-shadow: 0 5px 10px #9a86f3; border-color: #9a86f3; .emoji-scroll-wrapper::-webkit-scrollbar { background-color: #080420; width: 5px; &-thumb { background-color: #9a86f3; } }

Did you find the solution for this ?

[Frederico03]

Changes may not take effect because the version is different. If you install the new version, it is necessary to use new names for CSS variables, such as 'emoji-picker-react' -> 'EmojiPickerReact.' You can find more details in the documentation. https://www.npmjs.com/package/emoji-picker-react