How do I change the swatch's background color in ChromePicker from react-color?

Question

I am using react-color's ChromePicker in my react project and I cannot figure out how to change the swatch's background-color. Read somewhere that I would have to install reactcss package to do that. The instructions are not clear, tbh.

It will be a great if anybody can help me. Thanks in advance.

Answer 1

You can add your own CSS to override the library component's default values. It looks like The component is rendered inside a <div class="chrome-picker">...</div>, so you should be able to add to any CSS file imported into your app:

App.css

.chrome-picker {
  background-color: #FF0000;
}

You may find that it's getting applied too early, in which case try adding !important after the color to make sure it isn't itself overridden.