Add styles to ChromeColorPicker (#33711)

ChromeColorPicker allows to override styles by providing a "styles" parameter which consists of a bunch of CSS definitions applied to different parts of the component

types/react-color/index.d.ts

@@ -1,6 +1,10 @@
-// Type definitions for react-color 2.14
+// Type definitions for react-color 2.17
 // Project: https://github.com/casesandberg/react-color/, http://casesandberg.github.io/react-color
-// Definitions by: Karol Janyst <https://github.com/LKay>, Marks Polakovs <https://github.com/markspolakovs>, Matthieu Montaudouin <https://github.com/mntdn>, Nokogiri <https://github.com/nkgrnkgr>
+// Definitions by:  Karol Janyst <https://github.com/LKay>,
+//                  Marks Polakovs <https://github.com/markspolakovs>,
+//                  Matthieu Montaudouin <https://github.com/mntdn>,
+//                  Nokogiri <https://github.com/nkgrnkgr>,
+//                  0815Strohhut <https://github.com/0815Strohhut>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 

types/react-color/lib/components/chrome/Chrome.d.ts

@@ -1,8 +1,37 @@
-import { Component } from "react";
+import { Component, CSSProperties } from "react";
 import { ColorPickerProps } from "../../..";
 
+export interface ChromePickerDefaultStyles {
+    picker?: CSSProperties;
+    saturation?: CSSProperties;
+    Saturation?: CSSProperties;
+    body?: CSSProperties;
+    controls?: CSSProperties;
+    color?: CSSProperties;
+    swatch?: CSSProperties;
+    active?: CSSProperties;
+    toggles?: CSSProperties;
+    hue?: CSSProperties;
+    Hue?: CSSProperties;
+    alpha?: CSSProperties;
+    Alpha?: CSSProperties;
+}
+
+export interface ChromePickerDisableAlphaStyles {
+    color?: CSSProperties;
+    alpha?: CSSProperties;
+    hue?: CSSProperties;
+    swatch?: CSSProperties;
+}
+
+export interface ChromePickerStyles {
+    default?: ChromePickerDefaultStyles;
+    disableAlpha?: ChromePickerDisableAlphaStyles;
+}
+
 export interface ChromePickerProps extends ColorPickerProps<ChromePicker> {
     disableAlpha?: boolean;
+    styles?: ChromePickerStyles;
 }
 
 export default class ChromePicker extends Component<ChromePickerProps> {}

types/react-color/react-color-tests.tsx

@@ -35,7 +35,7 @@ const colors = ["#000", "#333"];
 
 render(<AlphaPicker height="100px" width="100px" />, document.getElementById("main"));
 render(<BlockPicker colors={ colors } width="100px" />, document.getElementById("main"));
-render(<ChromePicker disableAlpha />, document.getElementById("main"));
+render(<ChromePicker disableAlpha styles={{ default: { picker: { width: 200 }}}} />, document.getElementById("main"));
 render(<CirclePicker colors={ colors } width="100px" />, document.getElementById("main"));
 render(<CompactPicker colors={ colors } />, document.getElementById("main"));
 render(<GithubPicker colors={ colors } width="100px" />, document.getElementById("main"));