How to add border/shadow in color picker?

casesandberg / react-color

:art: Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more

http://casesandberg.github.io/react-color/

MIT License

12.05k stars 922 forks source link

How to add border/shadow in color picker? #821

Open Abbiscuit opened 3 years ago

Abbiscuit commented 3 years ago

I'm using TwitterPicker now. I added white color to colors array. Since this white color does not have any border color or box-shadow, users might not notice there's white color.

How do I add styling to it??

iamBoWu commented 3 years ago

Im looking for the answer of this as well. However, per this discussion https://github.com/casesandberg/react-color/issues/530, I don't think there is a solution yet. But you can try to override the css value for box-shadow.

Abbiscuit commented 3 years ago

@iamBoWu Thank you for your reply! I don't think this is the most elegant way but for now I override the css value like this... (Also I added "transparent" as default colors, too

)

border

.twitter-picker span div {
    border: 1px solid black;
}

box-shadow

.twitter-picker span div {
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
}

sumarlidason commented 3 years ago

<TwitterPicker
  styles={{
    default: {
      card: {
        background: theme.palette.background.paper
      }
    }
  }}
</TwitterPicker>