Custom styling with tailwind in React

[gielcobben]

Is there a way to style the component with Tailwind in React, with dark/light theme support? Would be nice if I could add a className to the component. If it's not possible I'm totally fine with doing it in plain CSS. But I can't figure out how to select [data-theme="dark"].

This is not working:

em-emoji-picker [data-theme="dark"] {
  --rgb-background: 0, 0, 0;
} 

[renny-ren]

You can add a className to parent div

<div className="dark:bg-black/40">
  <Picker data={data} />
<div>

[aldhyx]

You can do it this way: em-emoji-picker { --rgb-background: "inherit"; } <div className="bg-green-300 dark:bg-red-400"> <Picker /> </div>

[komagroup]

Doesn't work. I want to style the width of the section in shadow dom but nothing works.

It just wont go full width

em-emoji-picker {
    min-width: 100% !important;
    --sidebar-width: 0px !important;
    height: 330px;
}

It calculates the width based on the padding and the sidebar??

    width: calc(324px +(var(--padding) + var(--sidebar-width)));