From d382d779c912ef8b47519c0b98a482d0c03e29e4 Mon Sep 17 00:00:00 2001
From: twinh <twinhuang@qq.com>
Date: Wed, 21 Apr 2021 21:03:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E9=80=8F=E6=98=8E=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 __tests__/__snapshots__/index.js.snap | 2 +-
 index.js                              | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/__tests__/__snapshots__/index.js.snap b/__tests__/__snapshots__/index.js.snap
index 16ef7bc..6be0246 100644
--- a/__tests__/__snapshots__/index.js.snap
+++ b/__tests__/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`color picker basic 1`] = `"<div><div style=\\"width: 60px; padding: 5px; background: rgb(255, 255, 255); border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); display: inline-block; cursor: pointer;\\"><div style=\\"height: 22px; border-radius: 2px; background: rgb(0, 0, 0);\\"></div></div></div>"`;
+exports[`color picker basic 1`] = `"<div><div style=\\"width: 60px; padding: 5px; background: rgb(255, 255, 255); border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); display: inline-block; cursor: pointer;\\"><div style=\\"height: 22px; border-radius: 2px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==);\\"></div></div></div>"`;
diff --git a/index.js b/index.js
index 15307aa..95cbfac 100644
--- a/index.js
+++ b/index.js
@@ -28,12 +28,13 @@ class ColorPicker extends React.Component {
 
   render() {
     const {value, onChange, ...props} = this.props;
+    const isTransparent = !value || tinyColor(value).getAlpha() === 0;
 
     const styles = {
       color: {
         height: '22px',
         borderRadius: '2px',
-        background: value,
+        background: isTransparent ? 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==)' : value,
         boxShadow: value === '#ffffff' ? '0 0 0 1px rgba(0,0,0,.1)' : null,
       },
       swatch: {