Support className and style props

[amotarao]

In a project using Tailwind CSS, I may not want to create separate CSS files. Here's a proposal to address this coexistence:

Allow the use of className and style props to be provided.

Example

until now

<div className="[&_.epr-main]:bg-white">
  <EmojiPicker />
</div>

[class~='EmojiPickerReact'] {
  --epr-emoji-size: 24px;
  --epr-emoji-padding: 4px;
}

from now

<EmojiPicker className="bg-white" style={{ '--epr-emoji-size': '24px', '--epr-emoji-padding': '4px' }} />

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
emoji-picker-react	❌ Failed (Inspect)			Dec 22, 2023 11:15pm

[ealush]

Thank you @amotarao for taking the time to improve the picker. Your request is reasonable, and I think we should accept it.

Here is my proposal:

1. Since you're drilling the className and style props several layers down, I think it would be easier to add it to the configuration context and add a matching usePickerClassName and usePickerStyle. If you need any assistance there, let me know and I will guide you.
2. Can you please add matching documentation to the readme?

Thanks!

[amotarao]

@ealush Thank you for your review. I apologize for the delay in my response. I have implemented context.

I've also added minimal property explanations to the README.md, but I find documentation challenging. If possible, I would greatly appreciate your assistance in creating it.

Thank you!