From 5d960cc31670dcd9c8f17341f9111349ec66aa21 Mon Sep 17 00:00:00 2001
From: alex <44968616+nderkim@users.noreply.github.com>
Date: Thu, 27 Oct 2022 14:22:10 +1100
Subject: [PATCH 01/12] Add classNames API

---
 docs/examples/Experimental.tsx                |  2 +
 packages/react-select/src/Select.tsx          | 18 +++-
 .../react-select/src/components/Control.tsx   | 30 ++----
 .../react-select/src/components/Group.tsx     | 17 ++--
 .../react-select/src/components/Input.tsx     |  8 +-
 packages/react-select/src/components/Menu.tsx | 90 ++++++++---------
 .../src/components/MultiValue.tsx             | 96 +++++++------------
 .../react-select/src/components/Option.tsx    | 30 ++----
 .../src/components/Placeholder.tsx            | 13 +--
 .../src/components/SingleValue.tsx            | 15 ++-
 .../src/components/containers.tsx             | 45 ++++-----
 .../src/components/indicators.tsx             | 50 ++++------
 packages/react-select/src/styles.ts           | 56 +++++------
 packages/react-select/src/types.ts            |  9 +-
 packages/react-select/src/utils.ts            | 33 ++++++-
 storybook/stories/WithTailwind.stories.tsx    | 46 +++++++++
 16 files changed, 279 insertions(+), 279 deletions(-)
 create mode 100644 storybook/stories/WithTailwind.stories.tsx

diff --git a/docs/examples/Experimental.tsx b/docs/examples/Experimental.tsx
index 552132bcd2..236d6d0d9f 100644
--- a/docs/examples/Experimental.tsx
+++ b/docs/examples/Experimental.tsx
@@ -123,6 +123,7 @@ const Group = (props: GroupProps<DateOption, false>) => {
   const {
     Heading,
     getStyles,
+    getClassName,
     children,
     label,
     headingProps,
@@ -136,6 +137,7 @@ const Group = (props: GroupProps<DateOption, false>) => {
         selectProps={selectProps}
         theme={theme}
         getStyles={getStyles}
+        getClassName={getClassName}
         cx={cx}
         {...headingProps}
       >
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 11076fc810..bae7541a37 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -40,7 +40,12 @@ import {
 
 import { defaultComponents, SelectComponentsConfig } from './components/index';
 
-import { defaultStyles, StylesConfig, StylesProps } from './styles';
+import {
+  ClassNamesConfig,
+  defaultStyles,
+  StylesConfig,
+  StylesProps,
+} from './styles';
 import { defaultTheme, ThemeConfig } from './theme';
 
 import {
@@ -99,6 +104,10 @@ export interface Props<
    * This is useful when styling via CSS classes instead of the Styles API approach.
    */
   classNamePrefix?: string | null;
+  /**
+   * Provide a className based on state for each inner component
+   */
+  classNames: ClassNamesConfig<Option, IsMulti, Group>;
   /** Close the select menu when the user selects an option */
   closeMenuOnSelect: boolean;
   /**
@@ -271,6 +280,7 @@ export const defaultProps = {
   backspaceRemovesValue: true,
   blurInputOnSelect: isTouchCapable(),
   captureMenuScroll: !isTouchCapable(),
+  classNames: {},
   closeMenuOnSelect: true,
   closeMenuOnScroll: false,
   components: {},
@@ -1046,6 +1056,7 @@ export default class Select<
       clearValue,
       cx,
       getStyles,
+      getClassName,
       getValue,
       selectOption,
       setValue,
@@ -1058,6 +1069,7 @@ export default class Select<
       clearValue,
       cx,
       getStyles,
+      getClassName,
       getValue,
       hasValue,
       isMulti,
@@ -1085,6 +1097,10 @@ export default class Select<
     const custom = this.props.styles[key];
     return custom ? custom(base, props as any) : base;
   };
+  getClassName = <Key extends keyof StylesProps<Option, IsMulti, Group>>(
+    key: Key,
+    props: StylesProps<Option, IsMulti, Group>[Key]
+  ) => this.props.classNames[key]?.(props as any);
   getElementId = (
     element:
       | 'group'
diff --git a/packages/react-select/src/components/Control.tsx b/packages/react-select/src/components/Control.tsx
index 60534d0714..c00576d600 100644
--- a/packages/react-select/src/components/Control.tsx
+++ b/packages/react-select/src/components/Control.tsx
@@ -7,6 +7,7 @@ import {
   CSSObjectWithLabel,
   GroupBase,
 } from '../types';
+import { getStyleProps } from '../utils';
 
 export interface ControlProps<
   Option = unknown,
@@ -68,30 +69,17 @@ const Control = <
 >(
   props: ControlProps<Option, IsMulti, Group>
 ) => {
-  const {
-    children,
-    cx,
-    getStyles,
-    className,
-    isDisabled,
-    isFocused,
-    innerRef,
-    innerProps,
-    menuIsOpen,
-  } = props;
+  const { children, isDisabled, isFocused, innerRef, innerProps, menuIsOpen } =
+    props;
   return (
     <div
       ref={innerRef}
-      css={getStyles('control', props)}
-      className={cx(
-        {
-          control: true,
-          'control--is-disabled': isDisabled,
-          'control--is-focused': isFocused,
-          'control--menu-is-open': menuIsOpen,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'control', {
+        control: true,
+        'control--is-disabled': isDisabled,
+        'control--is-focused': isFocused,
+        'control--menu-is-open': menuIsOpen,
+      })}
       {...innerProps}
     >
       {children}
diff --git a/packages/react-select/src/components/Group.tsx b/packages/react-select/src/components/Group.tsx
index cc3dee2d30..4d0c75413e 100644
--- a/packages/react-select/src/components/Group.tsx
+++ b/packages/react-select/src/components/Group.tsx
@@ -1,9 +1,10 @@
 /** @jsx jsx */
 import { ComponentType, ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-import { cleanCommonProps } from '../utils';
+import { cleanCommonProps, getStyleProps } from '../utils';
 
 import {
+  CommonProps,
   CommonPropsAndClassName,
   CSSObjectWithLabel,
   CX,
@@ -62,9 +63,9 @@ const Group = <
 ) => {
   const {
     children,
-    className,
     cx,
     getStyles,
+    getClassName,
     Heading,
     headingProps,
     innerProps,
@@ -73,16 +74,13 @@ const Group = <
     selectProps,
   } = props;
   return (
-    <div
-      css={getStyles('group', props)}
-      className={cx({ group: true }, className)}
-      {...innerProps}
-    >
+    <div {...getStyleProps(props, 'group', { group: true })} {...innerProps}>
       <Heading
         {...headingProps}
         selectProps={selectProps}
         theme={theme}
         getStyles={getStyles}
+        getClassName={getClassName}
         cx={cx}
       >
         {label}
@@ -101,6 +99,7 @@ interface GroupHeadingPropsDefinedProps<
   selectProps: Props<Option, IsMulti, Group>;
   theme: Theme;
   getStyles: GetStyles<Option, IsMulti, Group>;
+  getClassName: CommonProps<Option, IsMulti, Group>['getClassName'];
   cx: CX;
 }
 
@@ -137,12 +136,10 @@ export const GroupHeading = <
 >(
   props: GroupHeadingProps<Option, IsMulti, Group>
 ) => {
-  const { getStyles, cx, className } = props;
   const { data, ...innerProps } = cleanCommonProps(props);
   return (
     <div
-      css={getStyles('groupHeading', props)}
-      className={cx({ 'group-heading': true }, className)}
+      {...getStyleProps(props, 'groupHeading', { 'group-heading': true })}
       {...innerProps}
     />
   );
diff --git a/packages/react-select/src/components/Input.tsx b/packages/react-select/src/components/Input.tsx
index 9b4e9e2ff1..cf5b02fe56 100644
--- a/packages/react-select/src/components/Input.tsx
+++ b/packages/react-select/src/components/Input.tsx
@@ -7,7 +7,7 @@ import {
   CSSObjectWithLabel,
   GroupBase,
 } from '../types';
-import { cleanCommonProps } from '../utils';
+import { cleanCommonProps, getStyleProps } from '../utils';
 
 export interface InputSpecificProps<
   Option = unknown,
@@ -93,14 +93,12 @@ const Input = <
 >(
   props: InputProps<Option, IsMulti, Group>
 ) => {
-  const { className, cx, getStyles, value } = props;
+  const { cx, value } = props;
   const { innerRef, isDisabled, isHidden, inputClassName, ...innerProps } =
     cleanCommonProps(props);
-
   return (
     <div
-      className={cx({ 'input-container': true }, className)}
-      css={getStyles('input', props)}
+      {...getStyleProps(props, 'input', { 'input-container': true })}
       data-value={value || ''}
     >
       <input
diff --git a/packages/react-select/src/components/Menu.tsx b/packages/react-select/src/components/Menu.tsx
index c49a0ed18f..b694a7bddc 100644
--- a/packages/react-select/src/components/Menu.tsx
+++ b/packages/react-select/src/components/Menu.tsx
@@ -20,6 +20,7 @@ import {
   getBoundingClientObj,
   getScrollParent,
   getScrollTop,
+  getStyleProps,
   normalizedHeight,
   scrollTo,
 } from '../utils';
@@ -366,12 +367,10 @@ export const MenuPlacer = <
 const Menu = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
   props: MenuProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, getStyles, innerRef, innerProps } = props;
-
+  const { children, innerRef, innerProps } = props;
   return (
     <div
-      css={getStyles('menu', props)}
-      className={cx({ menu: true }, className)}
+      {...getStyleProps(props, 'menu', { menu: true })}
       ref={innerRef}
       {...innerProps}
     >
@@ -426,18 +425,13 @@ export const MenuList = <
 >(
   props: MenuListProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, getStyles, innerProps, innerRef, isMulti } =
-    props;
+  const { children, innerProps, innerRef, isMulti } = props;
   return (
     <div
-      css={getStyles('menuList', props)}
-      className={cx(
-        {
-          'menu-list': true,
-          'menu-list--is-multi': isMulti,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'menuList', {
+        'menu-list': true,
+        'menu-list--is-multi': isMulti,
+      })}
       ref={innerRef}
       {...innerProps}
     >
@@ -485,17 +479,13 @@ export const NoOptionsMessage = <
 >(
   props: NoticeProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, getStyles, innerProps } = props;
+  const { children, innerProps } = props;
   return (
     <div
-      css={getStyles('noOptionsMessage', props)}
-      className={cx(
-        {
-          'menu-notice': true,
-          'menu-notice--no-options': true,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'noOptionsMessage', {
+        'menu-notice': true,
+        'menu-notice--no-options': true,
+      })}
       {...innerProps}
     >
       {children}
@@ -513,17 +503,13 @@ export const LoadingMessage = <
 >(
   props: NoticeProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, getStyles, innerProps } = props;
+  const { children, innerProps } = props;
   return (
     <div
-      css={getStyles('loadingMessage', props)}
-      className={cx(
-        {
-          'menu-notice': true,
-          'menu-notice--loading': true,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'loadingMessage', {
+        'menu-notice': true,
+        'menu-notice--loading': true,
+      })}
       {...innerProps}
     >
       {children}
@@ -578,17 +564,18 @@ export const MenuPortal = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  appendTo,
-  children,
-  className,
-  controlElement,
-  cx,
-  innerProps,
-  menuPlacement,
-  menuPosition,
-  getStyles,
-}: MenuPortalProps<Option, IsMulti, Group>) => {
+>(
+  props: MenuPortalProps<Option, IsMulti, Group>
+) => {
+  const {
+    appendTo,
+    children,
+    controlElement,
+    innerProps,
+    menuPlacement,
+    menuPosition,
+  } = props;
+
   const menuPortalRef = useRef<HTMLDivElement | null>(null);
   const cleanupRef = useRef<(() => void) | void | null>(null);
 
@@ -665,16 +652,17 @@ export const MenuPortal = <
   const menuWrapper = (
     <div
       ref={setMenuPortalElement}
-      css={getStyles('menuPortal', {
-        offset: computedPosition.offset,
-        position: menuPosition,
-        rect: computedPosition.rect,
-      })}
-      className={cx(
+      {...getStyleProps(
         {
-          'menu-portal': true,
+          ...props,
+          offset: computedPosition.offset,
+          position: menuPosition,
+          rect: computedPosition.rect,
         },
-        className
+        'menuPortal',
+        {
+          'menu-portal': true,
+        }
       )}
       {...innerProps}
     >
diff --git a/packages/react-select/src/components/MultiValue.tsx b/packages/react-select/src/components/MultiValue.tsx
index 173d9cd000..ce83fcdce0 100644
--- a/packages/react-select/src/components/MultiValue.tsx
+++ b/packages/react-select/src/components/MultiValue.tsx
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { ComponentType, ReactNode } from 'react';
-import { jsx, ClassNames } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { CrossIcon } from './indicators';
 import {
   CommonPropsAndClassName,
@@ -8,6 +8,7 @@ import {
   GroupBase,
 } from '../types';
 import { Props } from '../Select';
+import { getStyleProps } from '../utils';
 
 interface MultiValueComponents<
   Option,
@@ -143,11 +144,8 @@ const MultiValue = <
 ) => {
   const {
     children,
-    className,
     components,
-    cx,
     data,
-    getStyles,
     innerProps,
     isDisabled,
     removeProps,
@@ -157,62 +155,40 @@ const MultiValue = <
   const { Container, Label, Remove } = components;
 
   return (
-    <ClassNames>
-      {({ css, cx: emotionCx }) => (
-        <Container
-          data={data}
-          innerProps={{
-            className: emotionCx(
-              css(getStyles('multiValue', props)),
-              cx(
-                {
-                  'multi-value': true,
-                  'multi-value--is-disabled': isDisabled,
-                },
-                className
-              )
-            ),
-            ...innerProps,
-          }}
-          selectProps={selectProps}
-        >
-          <Label
-            data={data}
-            innerProps={{
-              className: emotionCx(
-                css(getStyles('multiValueLabel', props)),
-                cx(
-                  {
-                    'multi-value__label': true,
-                  },
-                  className
-                )
-              ),
-            }}
-            selectProps={selectProps}
-          >
-            {children}
-          </Label>
-          <Remove
-            data={data}
-            innerProps={{
-              className: emotionCx(
-                css(getStyles('multiValueRemove', props)),
-                cx(
-                  {
-                    'multi-value__remove': true,
-                  },
-                  className
-                )
-              ),
-              'aria-label': `Remove ${children || 'option'}`,
-              ...removeProps,
-            }}
-            selectProps={selectProps}
-          />
-        </Container>
-      )}
-    </ClassNames>
+    <Container
+      data={data}
+      innerProps={{
+        ...getStyleProps(props, 'multiValue', {
+          'multi-value': true,
+          'multi-value--is-disabled': isDisabled,
+        }),
+        ...innerProps,
+      }}
+      selectProps={selectProps}
+    >
+      <Label
+        data={data}
+        innerProps={{
+          ...getStyleProps(props, 'multiValueLabel', {
+            'multi-value__label': true,
+          }),
+        }}
+        selectProps={selectProps}
+      >
+        {children}
+      </Label>
+      <Remove
+        data={data}
+        innerProps={{
+          ...getStyleProps(props, 'multiValueRemove', {
+            'multi-value__remove': true,
+          }),
+          'aria-label': `Remove ${children || 'option'}`,
+          ...removeProps,
+        }}
+        selectProps={selectProps}
+      />
+    </Container>
   );
 };
 
diff --git a/packages/react-select/src/components/Option.tsx b/packages/react-select/src/components/Option.tsx
index 8a3615bb46..55a332a38c 100644
--- a/packages/react-select/src/components/Option.tsx
+++ b/packages/react-select/src/components/Option.tsx
@@ -7,6 +7,7 @@ import {
   CSSObjectWithLabel,
   GroupBase,
 } from '../types';
+import { getStyleProps } from '../utils';
 
 export interface OptionProps<
   Option = unknown,
@@ -80,29 +81,16 @@ const Option = <
 >(
   props: OptionProps<Option, IsMulti, Group>
 ) => {
-  const {
-    children,
-    className,
-    cx,
-    getStyles,
-    isDisabled,
-    isFocused,
-    isSelected,
-    innerRef,
-    innerProps,
-  } = props;
+  const { children, isDisabled, isFocused, isSelected, innerRef, innerProps } =
+    props;
   return (
     <div
-      css={getStyles('option', props)}
-      className={cx(
-        {
-          option: true,
-          'option--is-disabled': isDisabled,
-          'option--is-focused': isFocused,
-          'option--is-selected': isSelected,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'option', {
+        option: true,
+        'option--is-disabled': isDisabled,
+        'option--is-focused': isFocused,
+        'option--is-selected': isSelected,
+      })}
       ref={innerRef}
       aria-disabled={isDisabled}
       {...innerProps}
diff --git a/packages/react-select/src/components/Placeholder.tsx b/packages/react-select/src/components/Placeholder.tsx
index 75f986f682..95d90041e8 100644
--- a/packages/react-select/src/components/Placeholder.tsx
+++ b/packages/react-select/src/components/Placeholder.tsx
@@ -6,6 +6,7 @@ import {
   CSSObjectWithLabel,
   GroupBase,
 } from '../types';
+import { getStyleProps } from '../utils';
 
 export interface PlaceholderProps<
   Option = unknown,
@@ -41,16 +42,12 @@ const Placeholder = <
 >(
   props: PlaceholderProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, getStyles, innerProps } = props;
+  const { children, innerProps } = props;
   return (
     <div
-      css={getStyles('placeholder', props)}
-      className={cx(
-        {
-          placeholder: true,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'placeholder', {
+        placeholder: true,
+      })}
       {...innerProps}
     >
       {children}
diff --git a/packages/react-select/src/components/SingleValue.tsx b/packages/react-select/src/components/SingleValue.tsx
index 15fd28345d..fe3258a705 100644
--- a/packages/react-select/src/components/SingleValue.tsx
+++ b/packages/react-select/src/components/SingleValue.tsx
@@ -6,6 +6,7 @@ import {
   CSSObjectWithLabel,
   GroupBase,
 } from '../types';
+import { getStyleProps } from '../utils';
 
 export interface SingleValueProps<
   Option = unknown,
@@ -48,17 +49,13 @@ const SingleValue = <
 >(
   props: SingleValueProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, getStyles, isDisabled, innerProps } = props;
+  const { children, isDisabled, innerProps } = props;
   return (
     <div
-      css={getStyles('singleValue', props)}
-      className={cx(
-        {
-          'single-value': true,
-          'single-value--is-disabled': isDisabled,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'singleValue', {
+        'single-value': true,
+        'single-value--is-disabled': isDisabled,
+      })}
       {...innerProps}
     >
       {children}
diff --git a/packages/react-select/src/components/containers.tsx b/packages/react-select/src/components/containers.tsx
index e2135c7ce1..4e88486498 100644
--- a/packages/react-select/src/components/containers.tsx
+++ b/packages/react-select/src/components/containers.tsx
@@ -6,6 +6,7 @@ import {
   CSSObjectWithLabel,
   GroupBase,
 } from '../types';
+import { getStyleProps } from '../utils';
 
 // ==============================
 // Root Container
@@ -44,18 +45,13 @@ export const SelectContainer = <
 >(
   props: ContainerProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, getStyles, innerProps, isDisabled, isRtl } =
-    props;
+  const { children, innerProps, isDisabled, isRtl } = props;
   return (
     <div
-      css={getStyles('container', props)}
-      className={cx(
-        {
-          '--is-disabled': isDisabled,
-          '--is-rtl': isRtl,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'container', {
+        '--is-disabled': isDisabled,
+        '--is-rtl': isRtl,
+      })}
       {...innerProps}
     >
       {children}
@@ -104,20 +100,15 @@ export const ValueContainer = <
 >(
   props: ValueContainerProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, innerProps, isMulti, getStyles, hasValue } =
-    props;
+  const { children, innerProps, isMulti, hasValue } = props;
 
   return (
     <div
-      css={getStyles('valueContainer', props)}
-      className={cx(
-        {
-          'value-container': true,
-          'value-container--is-multi': isMulti,
-          'value-container--has-value': hasValue,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'valueContainer', {
+        'value-container': true,
+        'value-container--is-multi': isMulti,
+        'value-container--has-value': hasValue,
+      })}
       {...innerProps}
     >
       {children}
@@ -154,17 +145,13 @@ export const IndicatorsContainer = <
 >(
   props: IndicatorsContainerProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, innerProps, getStyles } = props;
+  const { children, innerProps } = props;
 
   return (
     <div
-      css={getStyles('indicatorsContainer', props)}
-      className={cx(
-        {
-          indicators: true,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'indicatorsContainer', {
+        indicators: true,
+      })}
       {...innerProps}
     >
       {children}
diff --git a/packages/react-select/src/components/indicators.tsx b/packages/react-select/src/components/indicators.tsx
index 291a5ffa6f..fb636b5bf4 100644
--- a/packages/react-select/src/components/indicators.tsx
+++ b/packages/react-select/src/components/indicators.tsx
@@ -7,6 +7,7 @@ import {
   CSSObjectWithLabel,
   GroupBase,
 } from '../types';
+import { getStyleProps } from '../utils';
 
 // ==============================
 // Dropdown & Clear Icons
@@ -96,17 +97,13 @@ export const DropdownIndicator = <
 >(
   props: DropdownIndicatorProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, getStyles, innerProps } = props;
+  const { children, innerProps } = props;
   return (
     <div
-      css={getStyles('dropdownIndicator', props)}
-      className={cx(
-        {
-          indicator: true,
-          'dropdown-indicator': true,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'dropdownIndicator', {
+        indicator: true,
+        'dropdown-indicator': true,
+      })}
       {...innerProps}
     >
       {children || <DownChevron />}
@@ -135,17 +132,13 @@ export const ClearIndicator = <
 >(
   props: ClearIndicatorProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, getStyles, innerProps } = props;
+  const { children, innerProps } = props;
   return (
     <div
-      css={getStyles('clearIndicator', props)}
-      className={cx(
-        {
-          indicator: true,
-          'clear-indicator': true,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'clearIndicator', {
+        indicator: true,
+        'clear-indicator': true,
+      })}
       {...innerProps}
     >
       {children || <CrossIcon />}
@@ -193,12 +186,13 @@ export const IndicatorSeparator = <
 >(
   props: IndicatorSeparatorProps<Option, IsMulti, Group>
 ) => {
-  const { className, cx, getStyles, innerProps } = props;
+  const { innerProps } = props;
   return (
     <span
       {...innerProps}
-      css={getStyles('indicatorSeparator', props)}
-      className={cx({ 'indicator-separator': true }, className)}
+      {...getStyleProps(props, 'indicatorSeparator', {
+        'indicator-separator': true,
+      })}
     />
   );
 };
@@ -276,18 +270,14 @@ export const LoadingIndicator = <
 >(
   props: LoadingIndicatorProps<Option, IsMulti, Group>
 ) => {
-  const { className, cx, getStyles, innerProps, isRtl } = props;
+  const { innerProps, isRtl } = props;
 
   return (
     <div
-      css={getStyles('loadingIndicator', props)}
-      className={cx(
-        {
-          indicator: true,
-          'loading-indicator': true,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'loadingIndicator', {
+        indicator: true,
+        'loading-indicator': true,
+      })}
       {...innerProps}
     >
       <LoadingDot delay={0} offset={isRtl} />
diff --git a/packages/react-select/src/styles.ts b/packages/react-select/src/styles.ts
index c734f49ab7..55fca2a4fd 100644
--- a/packages/react-select/src/styles.ts
+++ b/packages/react-select/src/styles.ts
@@ -78,36 +78,11 @@ export interface StylesProps<
   valueContainer: ValueContainerProps<Option, IsMulti, Group>;
 }
 
-type StylesFunction<Props> = (props: Props) => CSSObjectWithLabel;
-export type StylesFunctions<
-  Option,
-  IsMulti extends boolean,
-  Group extends GroupBase<Option>
-> = {
-  [K in keyof StylesProps<Option, IsMulti, Group>]: StylesFunction<
-    StylesProps<Option, IsMulti, Group>[K]
-  >;
-};
-
-export type StylesConfigFunction<Props> = (
-  base: CSSObjectWithLabel,
-  props: Props
-) => CSSObjectWithLabel;
-export type StylesConfig<
-  Option = unknown,
-  IsMulti extends boolean = boolean,
-  Group extends GroupBase<Option> = GroupBase<Option>
-> = {
-  [K in keyof StylesProps<Option, IsMulti, Group>]?: StylesConfigFunction<
-    StylesProps<Option, IsMulti, Group>[K]
-  >;
-};
-
-export const defaultStyles: StylesFunctions<
-  unknown,
-  boolean,
-  GroupBase<unknown>
-> = {
+export const defaultStyles: {
+  [K in keyof StylesProps<unknown, boolean, GroupBase<unknown>>]: (
+    props: StylesProps<unknown, boolean, GroupBase<unknown>>[K]
+  ) => CSSObjectWithLabel;
+} = {
   clearIndicator: clearIndicatorCSS,
   container: containerCSS,
   control: controlCSS,
@@ -132,6 +107,27 @@ export const defaultStyles: StylesFunctions<
   valueContainer: valueContainerCSS,
 };
 
+export type StylesConfig<
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+> = {
+  [K in keyof StylesProps<Option, IsMulti, Group>]?: (
+    base: CSSObjectWithLabel,
+    props: StylesProps<Option, IsMulti, Group>[K]
+  ) => CSSObjectWithLabel;
+};
+
+export type ClassNamesConfig<
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+> = {
+  [K in keyof StylesProps<Option, IsMulti, Group>]?: (
+    props: StylesProps<Option, IsMulti, Group>[K]
+  ) => string;
+};
+
 // Merge Utility
 // Allows consumers to extend a base Select with additional styles
 
diff --git a/packages/react-select/src/types.ts b/packages/react-select/src/types.ts
index 2926a715ba..cebf96a52f 100644
--- a/packages/react-select/src/types.ts
+++ b/packages/react-select/src/types.ts
@@ -56,7 +56,10 @@ export interface Theme {
 
 export type ClassNamesState = { [key: string]: boolean };
 
-export type CX = (state: ClassNamesState, className?: string) => string;
+export type CX = (
+  state: ClassNamesState,
+  ...classNames: (string | undefined)[]
+) => string;
 export type GetStyles<
   Option,
   IsMulti extends boolean,
@@ -79,6 +82,10 @@ export interface CommonProps<
     See the `styles` object for the properties available.
   */
   getStyles: GetStyles<Option, IsMulti, Group>;
+  getClassName: <Key extends keyof StylesProps<Option, IsMulti, Group>>(
+    propertyName: Key,
+    props: StylesProps<Option, IsMulti, Group>[Key]
+  ) => string | undefined;
   getValue: () => Options<Option>;
   hasValue: boolean;
   isMulti: boolean;
diff --git a/packages/react-select/src/utils.ts b/packages/react-select/src/utils.ts
index a65a3eb91b..df446971cf 100644
--- a/packages/react-select/src/utils.ts
+++ b/packages/react-select/src/utils.ts
@@ -1,4 +1,5 @@
-import {
+import type { StylesProps } from './styles';
+import type {
   ClassNamesState,
   CommonPropsAndClassName,
   GroupBase,
@@ -43,9 +44,9 @@ function applyPrefixToName(prefix: string, name: string) {
 export function classNames(
   prefix?: string | null,
   state?: ClassNamesState,
-  className?: string
+  ...classNameList: string[]
 ) {
-  const arr = [className];
+  const arr = [...classNameList];
   if (state && prefix) {
     for (let key in state) {
       if (state.hasOwnProperty(key) && state[key]) {
@@ -93,6 +94,7 @@ export const cleanCommonProps = <
     clearValue,
     cx,
     getStyles,
+    getClassName,
     getValue,
     hasValue,
     isMulti,
@@ -107,6 +109,31 @@ export const cleanCommonProps = <
   return { ...innerProps };
 };
 
+// ==============================
+// Get Style Props
+// ==============================
+
+export const getStyleProps = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>,
+  Key extends keyof StylesProps<Option, IsMulti, Group>
+>(
+  props: Pick<
+    CommonPropsAndClassName<Option, IsMulti, Group>,
+    'cx' | 'getStyles' | 'getClassName' | 'className'
+  > &
+    StylesProps<Option, IsMulti, Group>[Key],
+  name: Key,
+  classNamesState?: ClassNamesState
+) => {
+  const { cx, getStyles, getClassName, className } = props;
+  return {
+    css: getStyles(name, props),
+    className: cx(classNamesState ?? {}, getClassName(name, props), className),
+  };
+};
+
 // ==============================
 // Handle Input Change
 // ==============================
diff --git a/storybook/stories/WithTailwind.stories.tsx b/storybook/stories/WithTailwind.stories.tsx
new file mode 100644
index 0000000000..1239b932d9
--- /dev/null
+++ b/storybook/stories/WithTailwind.stories.tsx
@@ -0,0 +1,46 @@
+import '../styles/tailwind.css';
+
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import * as React from 'react';
+import Select from 'react-select';
+
+import { Field } from '../components/field';
+import { defaultArgs } from '../data';
+
+export default {
+  title: 'Select/WithTailwind',
+  component: Select,
+  argTypes: {},
+} as ComponentMeta<typeof Select>;
+
+const Template: ComponentStory<typeof Select> = ({
+  inputId = 'react-select',
+  ...props
+}) => {
+  return (
+    <Field htmlFor={inputId}>
+      <Select
+        inputId={inputId}
+        {...props}
+        // TODO
+        styles={{
+          valueContainer: (base, { hasValue }) => {
+            return {
+              ...base,
+              backgroundColor: hasValue ? 'red' : 'blue',
+            };
+          },
+        }}
+        classNames={{
+          valueContainer: ({ hasValue }) =>
+            hasValue ? 'bg-green-200' : 'bg-blue-200',
+        }}
+      />
+    </Field>
+  );
+};
+
+export const WithTailwind = Template.bind({});
+WithTailwind.args = {
+  ...defaultArgs,
+};

From 3aee85cb8c5d045d47d45b0f9ebd0c58d4593c42 Mon Sep 17 00:00:00 2001
From: alex <44968616+nderkim@users.noreply.github.com>
Date: Wed, 2 Nov 2022 09:08:39 +1100
Subject: [PATCH 02/12] Add unstyled prop

---
 packages/react-select/src/Select.tsx          |   6 +-
 .../__snapshots__/Async.test.tsx.snap         |  28 ++--
 .../AsyncCreatable.test.tsx.snap              |  28 ++--
 .../__snapshots__/Creatable.test.tsx.snap     |  28 ++--
 .../__snapshots__/Select.test.tsx.snap        |  28 ++--
 .../__snapshots__/StateManaged.test.tsx.snap  |  28 ++--
 .../react-select/src/components/Control.tsx   |  44 ++++---
 .../react-select/src/components/Group.tsx     |  31 +++--
 .../react-select/src/components/Input.tsx     |  25 ++--
 packages/react-select/src/components/Menu.tsx |  72 ++++++----
 .../src/components/MultiValue.tsx             |  69 ++++++----
 .../react-select/src/components/Option.tsx    |  58 ++++----
 .../src/components/Placeholder.tsx            |  17 ++-
 .../src/components/SingleValue.tsx            |  21 ++-
 .../src/components/containers.tsx             |  21 ++-
 .../src/components/indicators.tsx             |  90 ++++++++-----
 packages/react-select/src/styles.ts           |   5 +-
 .../ClassNamesWithTailwind.stories.tsx        |  67 ++++++++++
 .../stories/UnstyledWithTailwind.stories.tsx  | 124 ++++++++++++++++++
 storybook/stories/WithTailwind.stories.tsx    |  46 -------
 20 files changed, 548 insertions(+), 288 deletions(-)
 create mode 100644 storybook/stories/ClassNamesWithTailwind.stories.tsx
 create mode 100644 storybook/stories/UnstyledWithTailwind.stories.tsx
 delete mode 100644 storybook/stories/WithTailwind.stories.tsx

diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index bae7541a37..5c6463ec4b 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -267,6 +267,8 @@ export interface Props<
   tabIndex: number;
   /** Select the currently focused option when the user presses tab */
   tabSelectsValue: boolean;
+  /** Remove all non-essential styles */
+  unstyled: boolean;
   /** The value of the select; reflected by the selected option */
   value: PropsValue<Option>;
   /** Sets the form attribute on the input */
@@ -315,6 +317,7 @@ export const defaultProps = {
   styles: {},
   tabIndex: 0,
   tabSelectsValue: true,
+  unstyled: false,
 };
 
 interface State<
@@ -1092,7 +1095,8 @@ export default class Select<
     key: Key,
     props: StylesProps<Option, IsMulti, Group>[Key]
   ) => {
-    const base = defaultStyles[key](props as any);
+    const { unstyled } = this.props;
+    const base = defaultStyles[key](props as any, unstyled);
     base.boxSizing = 'border-box';
     const custom = this.props.styles[key];
     return custom ? custom(base, props as any) : base;
diff --git a/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
index 33600fcefb..869c353ee5 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
@@ -23,11 +23,6 @@ exports[`defaults - snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: hsl(0, 0%, 100%);
-  border-color: hsl(0, 0%, 80%);
-  border-radius: 4px;
-  border-style: solid;
-  border-width: 1px;
   cursor: default;
   display: -webkit-box;
   display: -webkit-flex;
@@ -45,6 +40,11 @@ exports[`defaults - snapshot 1`] = `
   position: relative;
   -webkit-transition: all 100ms;
   transition: all 100ms;
+  background-color: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 80%);
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
   box-sizing: border-box;
 }
 
@@ -65,33 +65,33 @@ exports[`defaults - snapshot 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  padding: 2px 8px;
   -webkit-overflow-scrolling: touch;
   position: relative;
   overflow: hidden;
+  padding: 2px 8px;
   box-sizing: border-box;
 }
 
 .emotion-5 {
-  color: hsl(0, 0%, 50%);
   grid-area: 1/1/2/3;
+  color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
   box-sizing: border-box;
 }
 
 .emotion-6 {
-  margin: 2px;
-  padding-bottom: 2px;
-  padding-top: 2px;
   visibility: visible;
-  color: hsl(0, 0%, 20%);
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   display: inline-grid;
   grid-area: 1/1/2/3;
   grid-template-columns: 0 min-content;
+  margin: 2px;
+  padding-bottom: 2px;
+  padding-top: 2px;
+  color: hsl(0, 0%, 20%);
   box-sizing: border-box;
 }
 
@@ -130,22 +130,22 @@ exports[`defaults - snapshot 1`] = `
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
+  width: 1px;
   background-color: hsl(0, 0%, 80%);
   margin-bottom: 8px;
   margin-top: 8px;
-  width: 1px;
   box-sizing: border-box;
 }
 
 .emotion-9 {
-  color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  padding: 8px;
   -webkit-transition: color 150ms;
   transition: color 150ms;
+  color: hsl(0, 0%, 80%);
+  padding: 8px;
   box-sizing: border-box;
 }
 
diff --git a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
index 33600fcefb..869c353ee5 100644
--- a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
@@ -23,11 +23,6 @@ exports[`defaults - snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: hsl(0, 0%, 100%);
-  border-color: hsl(0, 0%, 80%);
-  border-radius: 4px;
-  border-style: solid;
-  border-width: 1px;
   cursor: default;
   display: -webkit-box;
   display: -webkit-flex;
@@ -45,6 +40,11 @@ exports[`defaults - snapshot 1`] = `
   position: relative;
   -webkit-transition: all 100ms;
   transition: all 100ms;
+  background-color: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 80%);
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
   box-sizing: border-box;
 }
 
@@ -65,33 +65,33 @@ exports[`defaults - snapshot 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  padding: 2px 8px;
   -webkit-overflow-scrolling: touch;
   position: relative;
   overflow: hidden;
+  padding: 2px 8px;
   box-sizing: border-box;
 }
 
 .emotion-5 {
-  color: hsl(0, 0%, 50%);
   grid-area: 1/1/2/3;
+  color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
   box-sizing: border-box;
 }
 
 .emotion-6 {
-  margin: 2px;
-  padding-bottom: 2px;
-  padding-top: 2px;
   visibility: visible;
-  color: hsl(0, 0%, 20%);
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   display: inline-grid;
   grid-area: 1/1/2/3;
   grid-template-columns: 0 min-content;
+  margin: 2px;
+  padding-bottom: 2px;
+  padding-top: 2px;
+  color: hsl(0, 0%, 20%);
   box-sizing: border-box;
 }
 
@@ -130,22 +130,22 @@ exports[`defaults - snapshot 1`] = `
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
+  width: 1px;
   background-color: hsl(0, 0%, 80%);
   margin-bottom: 8px;
   margin-top: 8px;
-  width: 1px;
   box-sizing: border-box;
 }
 
 .emotion-9 {
-  color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  padding: 8px;
   -webkit-transition: color 150ms;
   transition: color 150ms;
+  color: hsl(0, 0%, 80%);
+  padding: 8px;
   box-sizing: border-box;
 }
 
diff --git a/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
index 33600fcefb..869c353ee5 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
@@ -23,11 +23,6 @@ exports[`defaults - snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: hsl(0, 0%, 100%);
-  border-color: hsl(0, 0%, 80%);
-  border-radius: 4px;
-  border-style: solid;
-  border-width: 1px;
   cursor: default;
   display: -webkit-box;
   display: -webkit-flex;
@@ -45,6 +40,11 @@ exports[`defaults - snapshot 1`] = `
   position: relative;
   -webkit-transition: all 100ms;
   transition: all 100ms;
+  background-color: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 80%);
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
   box-sizing: border-box;
 }
 
@@ -65,33 +65,33 @@ exports[`defaults - snapshot 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  padding: 2px 8px;
   -webkit-overflow-scrolling: touch;
   position: relative;
   overflow: hidden;
+  padding: 2px 8px;
   box-sizing: border-box;
 }
 
 .emotion-5 {
-  color: hsl(0, 0%, 50%);
   grid-area: 1/1/2/3;
+  color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
   box-sizing: border-box;
 }
 
 .emotion-6 {
-  margin: 2px;
-  padding-bottom: 2px;
-  padding-top: 2px;
   visibility: visible;
-  color: hsl(0, 0%, 20%);
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   display: inline-grid;
   grid-area: 1/1/2/3;
   grid-template-columns: 0 min-content;
+  margin: 2px;
+  padding-bottom: 2px;
+  padding-top: 2px;
+  color: hsl(0, 0%, 20%);
   box-sizing: border-box;
 }
 
@@ -130,22 +130,22 @@ exports[`defaults - snapshot 1`] = `
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
+  width: 1px;
   background-color: hsl(0, 0%, 80%);
   margin-bottom: 8px;
   margin-top: 8px;
-  width: 1px;
   box-sizing: border-box;
 }
 
 .emotion-9 {
-  color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  padding: 8px;
   -webkit-transition: color 150ms;
   transition: color 150ms;
+  color: hsl(0, 0%, 80%);
+  padding: 8px;
   box-sizing: border-box;
 }
 
diff --git a/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
index 11e1e4a4b2..d0dc6571da 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
@@ -23,11 +23,6 @@ exports[`snapshot - defaults 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: hsl(0, 0%, 100%);
-  border-color: hsl(0, 0%, 80%);
-  border-radius: 4px;
-  border-style: solid;
-  border-width: 1px;
   cursor: default;
   display: -webkit-box;
   display: -webkit-flex;
@@ -45,6 +40,11 @@ exports[`snapshot - defaults 1`] = `
   position: relative;
   -webkit-transition: all 100ms;
   transition: all 100ms;
+  background-color: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 80%);
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
   box-sizing: border-box;
 }
 
@@ -65,33 +65,33 @@ exports[`snapshot - defaults 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  padding: 2px 8px;
   -webkit-overflow-scrolling: touch;
   position: relative;
   overflow: hidden;
+  padding: 2px 8px;
   box-sizing: border-box;
 }
 
 .emotion-5 {
-  color: hsl(0, 0%, 50%);
   grid-area: 1/1/2/3;
+  color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
   box-sizing: border-box;
 }
 
 .emotion-6 {
-  margin: 2px;
-  padding-bottom: 2px;
-  padding-top: 2px;
   visibility: visible;
-  color: hsl(0, 0%, 20%);
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   display: inline-grid;
   grid-area: 1/1/2/3;
   grid-template-columns: 0 min-content;
+  margin: 2px;
+  padding-bottom: 2px;
+  padding-top: 2px;
+  color: hsl(0, 0%, 20%);
   box-sizing: border-box;
 }
 
@@ -130,22 +130,22 @@ exports[`snapshot - defaults 1`] = `
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
+  width: 1px;
   background-color: hsl(0, 0%, 80%);
   margin-bottom: 8px;
   margin-top: 8px;
-  width: 1px;
   box-sizing: border-box;
 }
 
 .emotion-9 {
-  color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  padding: 8px;
   -webkit-transition: color 150ms;
   transition: color 150ms;
+  color: hsl(0, 0%, 80%);
+  padding: 8px;
   box-sizing: border-box;
 }
 
diff --git a/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
index d8ee569881..e992b60181 100644
--- a/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
@@ -23,11 +23,6 @@ exports[`defaults > snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: hsl(0, 0%, 100%);
-  border-color: hsl(0, 0%, 80%);
-  border-radius: 4px;
-  border-style: solid;
-  border-width: 1px;
   cursor: default;
   display: -webkit-box;
   display: -webkit-flex;
@@ -45,6 +40,11 @@ exports[`defaults > snapshot 1`] = `
   position: relative;
   -webkit-transition: all 100ms;
   transition: all 100ms;
+  background-color: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 80%);
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
   box-sizing: border-box;
 }
 
@@ -65,33 +65,33 @@ exports[`defaults > snapshot 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  padding: 2px 8px;
   -webkit-overflow-scrolling: touch;
   position: relative;
   overflow: hidden;
+  padding: 2px 8px;
   box-sizing: border-box;
 }
 
 .emotion-5 {
-  color: hsl(0, 0%, 50%);
   grid-area: 1/1/2/3;
+  color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
   box-sizing: border-box;
 }
 
 .emotion-6 {
-  margin: 2px;
-  padding-bottom: 2px;
-  padding-top: 2px;
   visibility: visible;
-  color: hsl(0, 0%, 20%);
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   display: inline-grid;
   grid-area: 1/1/2/3;
   grid-template-columns: 0 min-content;
+  margin: 2px;
+  padding-bottom: 2px;
+  padding-top: 2px;
+  color: hsl(0, 0%, 20%);
   box-sizing: border-box;
 }
 
@@ -130,22 +130,22 @@ exports[`defaults > snapshot 1`] = `
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
+  width: 1px;
   background-color: hsl(0, 0%, 80%);
   margin-bottom: 8px;
   margin-top: 8px;
-  width: 1px;
   box-sizing: border-box;
 }
 
 .emotion-9 {
-  color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  padding: 8px;
   -webkit-transition: color 150ms;
   transition: color 150ms;
+  color: hsl(0, 0%, 80%);
+  padding: 8px;
   box-sizing: border-box;
 }
 
diff --git a/packages/react-select/src/components/Control.tsx b/packages/react-select/src/components/Control.tsx
index c00576d600..d8e85c3db0 100644
--- a/packages/react-select/src/components/Control.tsx
+++ b/packages/react-select/src/components/Control.tsx
@@ -31,23 +31,16 @@ export const css = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  isDisabled,
-  isFocused,
-  theme: { colors, borderRadius, spacing },
-}: ControlProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    isDisabled,
+    isFocused,
+    theme: { colors, borderRadius, spacing },
+  }: ControlProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   label: 'control',
   alignItems: 'center',
-  backgroundColor: isDisabled ? colors.neutral5 : colors.neutral0,
-  borderColor: isDisabled
-    ? colors.neutral10
-    : isFocused
-    ? colors.primary
-    : colors.neutral20,
-  borderRadius: borderRadius,
-  borderStyle: 'solid',
-  borderWidth: 1,
-  boxShadow: isFocused ? `0 0 0 1px ${colors.primary}` : undefined,
   cursor: 'default',
   display: 'flex',
   flexWrap: 'wrap',
@@ -56,10 +49,23 @@ export const css = <
   outline: '0 !important',
   position: 'relative',
   transition: 'all 100ms',
-
-  '&:hover': {
-    borderColor: isFocused ? colors.primary : colors.neutral30,
-  },
+  ...(unstyled
+    ? {}
+    : {
+        backgroundColor: isDisabled ? colors.neutral5 : colors.neutral0,
+        borderColor: isDisabled
+          ? colors.neutral10
+          : isFocused
+          ? colors.primary
+          : colors.neutral20,
+        borderRadius: borderRadius,
+        borderStyle: 'solid',
+        borderWidth: 1,
+        boxShadow: isFocused ? `0 0 0 1px ${colors.primary}` : undefined,
+        '&:hover': {
+          borderColor: isFocused ? colors.primary : colors.neutral30,
+        },
+      }),
 });
 
 const Control = <
diff --git a/packages/react-select/src/components/Group.tsx b/packages/react-select/src/components/Group.tsx
index 4d0c75413e..3daa87ca6f 100644
--- a/packages/react-select/src/components/Group.tsx
+++ b/packages/react-select/src/components/Group.tsx
@@ -47,12 +47,16 @@ export const groupCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  theme: { spacing },
-}: GroupProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
-  paddingBottom: spacing.baseUnit * 2,
-  paddingTop: spacing.baseUnit * 2,
-});
+>(
+  { theme: { spacing } }: GroupProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel =>
+  unstyled
+    ? {}
+    : {
+        paddingBottom: spacing.baseUnit * 2,
+        paddingTop: spacing.baseUnit * 2,
+      };
 
 const Group = <
   Option,
@@ -114,9 +118,10 @@ export const groupHeadingCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  theme: { spacing },
-}: GroupHeadingProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  { theme: { spacing } }: GroupHeadingProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   label: 'group',
   color: '#999',
   cursor: 'default',
@@ -124,9 +129,13 @@ export const groupHeadingCSS = <
   fontSize: '75%',
   fontWeight: 500,
   marginBottom: '0.25em',
-  paddingLeft: spacing.baseUnit * 3,
-  paddingRight: spacing.baseUnit * 3,
   textTransform: 'uppercase',
+  ...(unstyled
+    ? {}
+    : {
+        paddingLeft: spacing.baseUnit * 3,
+        paddingRight: spacing.baseUnit * 3,
+      }),
 });
 
 export const GroupHeading = <
diff --git a/packages/react-select/src/components/Input.tsx b/packages/react-select/src/components/Input.tsx
index cf5b02fe56..0d57982e80 100644
--- a/packages/react-select/src/components/Input.tsx
+++ b/packages/react-select/src/components/Input.tsx
@@ -37,20 +37,27 @@ export const inputCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  isDisabled,
-  value,
-  theme: { spacing, colors },
-}: InputProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
-  margin: spacing.baseUnit / 2,
-  paddingBottom: spacing.baseUnit / 2,
-  paddingTop: spacing.baseUnit / 2,
+>(
+  {
+    isDisabled,
+    value,
+    theme: { spacing, colors },
+  }: InputProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   visibility: isDisabled ? 'hidden' : 'visible',
-  color: colors.neutral80,
   // force css to recompute when value change due to @emotion bug.
   // We can remove it whenever the bug is fixed.
   transform: value ? 'translateZ(0)' : '',
   ...containerStyle,
+  ...(unstyled
+    ? {}
+    : {
+        margin: spacing.baseUnit / 2,
+        paddingBottom: spacing.baseUnit / 2,
+        paddingTop: spacing.baseUnit / 2,
+        color: colors.neutral80,
+      }),
 });
 
 const spacingStyle = {
diff --git a/packages/react-select/src/components/Menu.tsx b/packages/react-select/src/components/Menu.tsx
index b694a7bddc..d5cc0a79ad 100644
--- a/packages/react-select/src/components/Menu.tsx
+++ b/packages/react-select/src/components/Menu.tsx
@@ -278,20 +278,28 @@ export const menuCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  placement,
-  theme: { borderRadius, spacing, colors },
-}: MenuProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    placement,
+    theme: { borderRadius, spacing, colors },
+  }: MenuProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   label: 'menu',
   [alignToControl(placement)]: '100%',
-  backgroundColor: colors.neutral0,
-  borderRadius: borderRadius,
-  boxShadow: '0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)',
-  marginBottom: spacing.menuGutter,
-  marginTop: spacing.menuGutter,
   position: 'absolute',
   width: '100%',
   zIndex: 1,
+  ...(unstyled
+    ? {}
+    : {
+        backgroundColor: colors.neutral0,
+        borderRadius: borderRadius,
+        boxShadow:
+          '0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)',
+        marginBottom: spacing.menuGutter,
+        marginTop: spacing.menuGutter,
+      }),
 });
 
 const PortalPlacementContext =
@@ -405,18 +413,25 @@ export const menuListCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  maxHeight,
-  theme: {
-    spacing: { baseUnit },
-  },
-}: MenuListProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    maxHeight,
+    theme: {
+      spacing: { baseUnit },
+    },
+  }: MenuListProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   maxHeight,
   overflowY: 'auto',
-  paddingBottom: baseUnit,
-  paddingTop: baseUnit,
   position: 'relative', // required for offset[Height, Top] > keyboard scroll
   WebkitOverflowScrolling: 'touch',
+  ...(unstyled
+    ? {}
+    : {
+        paddingBottom: baseUnit,
+        paddingTop: baseUnit,
+      }),
 });
 export const MenuList = <
   Option,
@@ -448,15 +463,22 @@ const noticeCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  theme: {
-    spacing: { baseUnit },
-    colors,
-  },
-}: NoticeProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
-  color: colors.neutral40,
-  padding: `${baseUnit * 2}px ${baseUnit * 3}px`,
+>(
+  {
+    theme: {
+      spacing: { baseUnit },
+      colors,
+    },
+  }: NoticeProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   textAlign: 'center',
+  ...(unstyled
+    ? {}
+    : {
+        color: colors.neutral40,
+        padding: `${baseUnit * 2}px ${baseUnit * 3}px`,
+      }),
 });
 export const noOptionsMessageCSS = noticeCSS;
 export const loadingMessageCSS = noticeCSS;
diff --git a/packages/react-select/src/components/MultiValue.tsx b/packages/react-select/src/components/MultiValue.tsx
index ce83fcdce0..b0ee146141 100644
--- a/packages/react-select/src/components/MultiValue.tsx
+++ b/packages/react-select/src/components/MultiValue.tsx
@@ -40,27 +40,35 @@ export const multiValueCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  theme: { spacing, borderRadius, colors },
-}: MultiValueProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    theme: { spacing, borderRadius, colors },
+  }: MultiValueProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   label: 'multiValue',
-  backgroundColor: colors.neutral10,
-  borderRadius: borderRadius / 2,
   display: 'flex',
-  margin: spacing.baseUnit / 2,
   minWidth: 0, // resolves flex/text-overflow bug
+  ...(unstyled
+    ? {}
+    : {
+        backgroundColor: colors.neutral10,
+        borderRadius: borderRadius / 2,
+        margin: spacing.baseUnit / 2,
+      }),
 });
 
 export const multiValueLabelCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  theme: { borderRadius, colors },
-  cropWithEllipsis,
-}: MultiValueProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
-  borderRadius: borderRadius / 2,
-  color: colors.neutral80,
+>(
+  {
+    theme: { borderRadius, colors },
+    cropWithEllipsis,
+  }: MultiValueProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   fontSize: '85%',
   overflow: 'hidden',
   padding: 3,
@@ -68,26 +76,39 @@ export const multiValueLabelCSS = <
   textOverflow:
     cropWithEllipsis || cropWithEllipsis === undefined ? 'ellipsis' : undefined,
   whiteSpace: 'nowrap',
+  ...(unstyled
+    ? {}
+    : {
+        borderRadius: borderRadius / 2,
+        color: colors.neutral80,
+      }),
 });
 
 export const multiValueRemoveCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  theme: { spacing, borderRadius, colors },
-  isFocused,
-}: MultiValueProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    theme: { spacing, borderRadius, colors },
+    isFocused,
+  }: MultiValueProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   alignItems: 'center',
-  borderRadius: borderRadius / 2,
-  backgroundColor: isFocused ? colors.dangerLight : undefined,
   display: 'flex',
-  paddingLeft: spacing.baseUnit,
-  paddingRight: spacing.baseUnit,
-  ':hover': {
-    backgroundColor: colors.dangerLight,
-    color: colors.danger,
-  },
+  ...(unstyled
+    ? {}
+    : {
+        borderRadius: borderRadius / 2,
+        backgroundColor: isFocused ? colors.dangerLight : undefined,
+        paddingLeft: spacing.baseUnit,
+        paddingRight: spacing.baseUnit,
+        ':hover': {
+          backgroundColor: colors.dangerLight,
+          color: colors.danger,
+        },
+      }),
 });
 
 export interface MultiValueGenericProps<
diff --git a/packages/react-select/src/components/Option.tsx b/packages/react-select/src/components/Option.tsx
index 55a332a38c..57afddcc1c 100644
--- a/packages/react-select/src/components/Option.tsx
+++ b/packages/react-select/src/components/Option.tsx
@@ -39,39 +39,45 @@ export const optionCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  isDisabled,
-  isFocused,
-  isSelected,
-  theme: { spacing, colors },
-}: OptionProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    isDisabled,
+    isFocused,
+    isSelected,
+    theme: { spacing, colors },
+  }: OptionProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   label: 'option',
-  backgroundColor: isSelected
-    ? colors.primary
-    : isFocused
-    ? colors.primary25
-    : 'transparent',
-  color: isDisabled
-    ? colors.neutral20
-    : isSelected
-    ? colors.neutral0
-    : 'inherit',
   cursor: 'default',
   display: 'block',
   fontSize: 'inherit',
-  padding: `${spacing.baseUnit * 2}px ${spacing.baseUnit * 3}px`,
   width: '100%',
   userSelect: 'none',
   WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
-
-  // provide some affordance on touch devices
-  ':active': {
-    backgroundColor: !isDisabled
-      ? isSelected
-        ? colors.primary
-        : colors.primary50
-      : undefined,
-  },
+  ...(unstyled
+    ? {}
+    : {
+        backgroundColor: isSelected
+          ? colors.primary
+          : isFocused
+          ? colors.primary25
+          : 'transparent',
+        color: isDisabled
+          ? colors.neutral20
+          : isSelected
+          ? colors.neutral0
+          : 'inherit',
+        padding: `${spacing.baseUnit * 2}px ${spacing.baseUnit * 3}px`,
+        // provide some affordance on touch devices
+        ':active': {
+          backgroundColor: !isDisabled
+            ? isSelected
+              ? colors.primary
+              : colors.primary50
+            : undefined,
+        },
+      }),
 });
 
 const Option = <
diff --git a/packages/react-select/src/components/Placeholder.tsx b/packages/react-select/src/components/Placeholder.tsx
index 95d90041e8..626d05c589 100644
--- a/packages/react-select/src/components/Placeholder.tsx
+++ b/packages/react-select/src/components/Placeholder.tsx
@@ -25,14 +25,19 @@ export const placeholderCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  theme: { spacing, colors },
-}: PlaceholderProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  { theme: { spacing, colors } }: PlaceholderProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   label: 'placeholder',
-  color: colors.neutral50,
   gridArea: '1 / 1 / 2 / 3',
-  marginLeft: spacing.baseUnit / 2,
-  marginRight: spacing.baseUnit / 2,
+  ...(unstyled
+    ? {}
+    : {
+        color: colors.neutral50,
+        marginLeft: spacing.baseUnit / 2,
+        marginRight: spacing.baseUnit / 2,
+      }),
 });
 
 const Placeholder = <
diff --git a/packages/react-select/src/components/SingleValue.tsx b/packages/react-select/src/components/SingleValue.tsx
index fe3258a705..042780006e 100644
--- a/packages/react-select/src/components/SingleValue.tsx
+++ b/packages/react-select/src/components/SingleValue.tsx
@@ -27,19 +27,26 @@ export const css = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  isDisabled,
-  theme: { spacing, colors },
-}: SingleValueProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    isDisabled,
+    theme: { spacing, colors },
+  }: SingleValueProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   label: 'singleValue',
-  color: isDisabled ? colors.neutral40 : colors.neutral80,
   gridArea: '1 / 1 / 2 / 3',
-  marginLeft: spacing.baseUnit / 2,
-  marginRight: spacing.baseUnit / 2,
   maxWidth: '100%',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
+  ...(unstyled
+    ? {}
+    : {
+        color: isDisabled ? colors.neutral40 : colors.neutral80,
+        marginLeft: spacing.baseUnit / 2,
+        marginRight: spacing.baseUnit / 2,
+      }),
 });
 
 const SingleValue = <
diff --git a/packages/react-select/src/components/containers.tsx b/packages/react-select/src/components/containers.tsx
index 4e88486498..b1f0b00246 100644
--- a/packages/react-select/src/components/containers.tsx
+++ b/packages/react-select/src/components/containers.tsx
@@ -78,20 +78,27 @@ export const valueContainerCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  theme: { spacing },
-  isMulti,
-  hasValue,
-  selectProps: { controlShouldRenderValue },
-}: ValueContainerProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    theme: { spacing },
+    isMulti,
+    hasValue,
+    selectProps: { controlShouldRenderValue },
+  }: ValueContainerProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   alignItems: 'center',
   display: isMulti && hasValue && controlShouldRenderValue ? 'flex' : 'grid',
   flex: 1,
   flexWrap: 'wrap',
-  padding: `${spacing.baseUnit / 2}px ${spacing.baseUnit * 2}px`,
   WebkitOverflowScrolling: 'touch',
   position: 'relative',
   overflow: 'hidden',
+  ...(unstyled
+    ? {}
+    : {
+        padding: `${spacing.baseUnit / 2}px ${spacing.baseUnit * 2}px`,
+      }),
 });
 export const ValueContainer = <
   Option,
diff --git a/packages/react-select/src/components/indicators.tsx b/packages/react-select/src/components/indicators.tsx
index fb636b5bf4..052cc13c90 100644
--- a/packages/react-select/src/components/indicators.tsx
+++ b/packages/react-select/src/components/indicators.tsx
@@ -69,24 +69,30 @@ const baseCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  isFocused,
-  theme: {
-    spacing: { baseUnit },
-    colors,
-  },
-}:
-  | DropdownIndicatorProps<Option, IsMulti, Group>
-  | ClearIndicatorProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    isFocused,
+    theme: {
+      spacing: { baseUnit },
+      colors,
+    },
+  }:
+    | DropdownIndicatorProps<Option, IsMulti, Group>
+    | ClearIndicatorProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   label: 'indicatorContainer',
-  color: isFocused ? colors.neutral60 : colors.neutral20,
   display: 'flex',
-  padding: baseUnit * 2,
   transition: 'color 150ms',
-
-  ':hover': {
-    color: isFocused ? colors.neutral80 : colors.neutral40,
-  },
+  ...(unstyled
+    ? {}
+    : {
+        color: isFocused ? colors.neutral60 : colors.neutral20,
+        padding: baseUnit * 2,
+        ':hover': {
+          color: isFocused ? colors.neutral80 : colors.neutral40,
+        },
+      }),
 });
 
 export const dropdownIndicatorCSS = baseCSS;
@@ -164,19 +170,26 @@ export const indicatorSeparatorCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  isDisabled,
-  theme: {
-    spacing: { baseUnit },
-    colors,
-  },
-}: IndicatorSeparatorProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    isDisabled,
+    theme: {
+      spacing: { baseUnit },
+      colors,
+    },
+  }: IndicatorSeparatorProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   label: 'indicatorSeparator',
   alignSelf: 'stretch',
-  backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20,
-  marginBottom: baseUnit * 2,
-  marginTop: baseUnit * 2,
   width: 1,
+  ...(unstyled
+    ? {}
+    : {
+        backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20,
+        marginBottom: baseUnit * 2,
+        marginTop: baseUnit * 2,
+      }),
 });
 
 export const IndicatorSeparator = <
@@ -210,18 +223,19 @@ export const loadingIndicatorCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  isFocused,
-  size,
-  theme: {
-    colors,
-    spacing: { baseUnit },
-  },
-}: LoadingIndicatorProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    isFocused,
+    size,
+    theme: {
+      colors,
+      spacing: { baseUnit },
+    },
+  }: LoadingIndicatorProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   label: 'loadingIndicator',
-  color: isFocused ? colors.neutral60 : colors.neutral20,
   display: 'flex',
-  padding: baseUnit * 2,
   transition: 'color 150ms',
   alignSelf: 'center',
   fontSize: size,
@@ -229,6 +243,12 @@ export const loadingIndicatorCSS = <
   marginRight: size,
   textAlign: 'center',
   verticalAlign: 'middle',
+  ...(unstyled
+    ? {}
+    : {
+        color: isFocused ? colors.neutral60 : colors.neutral20,
+        padding: baseUnit * 2,
+      }),
 });
 
 interface LoadingDotProps {
diff --git a/packages/react-select/src/styles.ts b/packages/react-select/src/styles.ts
index 55fca2a4fd..a28181567a 100644
--- a/packages/react-select/src/styles.ts
+++ b/packages/react-select/src/styles.ts
@@ -79,8 +79,9 @@ export interface StylesProps<
 }
 
 export const defaultStyles: {
-  [K in keyof StylesProps<unknown, boolean, GroupBase<unknown>>]: (
-    props: StylesProps<unknown, boolean, GroupBase<unknown>>[K]
+  [K in keyof StylesProps<any, any, any>]: (
+    props: StylesProps<unknown, boolean, GroupBase<unknown>>[K],
+    unstyled: boolean
   ) => CSSObjectWithLabel;
 } = {
   clearIndicator: clearIndicatorCSS,
diff --git a/storybook/stories/ClassNamesWithTailwind.stories.tsx b/storybook/stories/ClassNamesWithTailwind.stories.tsx
new file mode 100644
index 0000000000..1d0072ef13
--- /dev/null
+++ b/storybook/stories/ClassNamesWithTailwind.stories.tsx
@@ -0,0 +1,67 @@
+import '../styles/tailwind.css';
+
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import classNames from 'classnames';
+import * as React from 'react';
+import Select from 'react-select';
+
+import { Field } from '../components/field';
+import { defaultArgs } from '../data';
+
+export default {
+  title: 'Select/ClassNamesWithTailwind',
+  component: Select,
+  argTypes: {},
+} as ComponentMeta<typeof Select>;
+
+// This ensures that Emotion's styles are inserted before Tailwind's styles so that Tailwind classes have precedence over Emotion
+const EmotionCacheProvider = ({ children }: { children: React.ReactNode }) => {
+  const cache = React.useMemo(
+    () =>
+      createCache({
+        key: 'with-tailwind',
+        insertionPoint: document.querySelector('title')!,
+      }),
+    []
+  );
+
+  return <CacheProvider value={cache}>{children}</CacheProvider>;
+};
+
+const Template: ComponentStory<typeof Select> = ({
+  inputId = 'react-select',
+  ...props
+}) => {
+  return (
+    <EmotionCacheProvider>
+      <Field htmlFor={inputId} label="ClassNames With Tailwind">
+        <Select
+          inputId={inputId}
+          {...props}
+          classNames={{
+            control: ({ isDisabled, isFocused }) =>
+              classNames(
+                !isDisabled && isFocused && 'border-purple-800',
+                isFocused && 'shadow-[0_0_0_1px] shadow-purple-800',
+                isFocused && 'hover:border-purple-800'
+              ),
+            option: ({ isDisabled, isFocused, isSelected }) =>
+              classNames(
+                isSelected && 'bg-purple-800',
+                !isSelected && isFocused && 'bg-purple-300',
+                !isDisabled && isSelected && 'active:bg-purple-800',
+                !isDisabled && !isSelected && 'active:bg-purple-500'
+              ),
+          }}
+        />
+      </Field>
+    </EmotionCacheProvider>
+  );
+};
+
+export const ClassNamesWithTailwind = Template.bind({});
+ClassNamesWithTailwind.args = {
+  ...defaultArgs,
+};
diff --git a/storybook/stories/UnstyledWithTailwind.stories.tsx b/storybook/stories/UnstyledWithTailwind.stories.tsx
new file mode 100644
index 0000000000..807b44e1f4
--- /dev/null
+++ b/storybook/stories/UnstyledWithTailwind.stories.tsx
@@ -0,0 +1,124 @@
+import '../styles/tailwind.css';
+
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import classNames from 'classnames';
+import * as React from 'react';
+import Select from 'react-select';
+
+import { Field } from '../components/field';
+import { defaultArgs } from '../data';
+
+export default {
+  title: 'Select/UnstyledWithTailwind',
+  component: Select,
+  argTypes: {},
+} as ComponentMeta<typeof Select>;
+
+const Template: ComponentStory<typeof Select> = ({
+  inputId = 'react-select',
+  ...props
+}) => {
+  return (
+    <Field htmlFor={inputId} label="Unstyled With Tailwind">
+      <Select
+        inputId={inputId}
+        {...props}
+        unstyled // Remove all non-essential styles
+        classNames={{
+          clearIndicator: ({ isFocused }) =>
+            classNames(
+              isFocused ? 'text-neutral-600' : 'text-neutral-200',
+              'p-2',
+              isFocused ? 'hover:text-neutral-800' : 'hover:text-neutral-400'
+            ),
+          // container: () => classNames(),
+          control: ({ isDisabled, isFocused }) =>
+            classNames(
+              isDisabled ? 'bg-neutral-50' : 'bg-white',
+              isDisabled
+                ? 'border-neutral-100'
+                : isFocused
+                ? 'border-purple-800'
+                : 'border-neutral-200',
+              'rounded',
+              'border-solid',
+              'border',
+              isFocused && 'shadow-[0_0_0_1px] shadow-purple-800',
+              isFocused ? 'hover:border-purple-800' : 'hover:border-neutral-300'
+            ),
+          dropdownIndicator: ({ isFocused }) =>
+            classNames(
+              isFocused ? 'text-neutral-600' : 'text-neutral-200',
+              'p-2',
+              isFocused ? 'hover:text-neutral-800' : 'hover:text-neutral-400'
+            ),
+          group: () => classNames('py-2'),
+          groupHeading: () => classNames('px-3'),
+          // indicatorsContainer: () => classNames(),
+          indicatorSeparator: ({ isDisabled }) =>
+            classNames(
+              isDisabled ? 'bg-neutral-100' : 'bg-neutral-200',
+              'my-2'
+            ),
+          input: () => classNames('m-0.5', 'py-0.5', 'text-neutral-800'),
+          loadingIndicator: ({ isFocused }) =>
+            classNames(
+              isFocused ? 'text-neutral-600' : 'text-neutral-200',
+              'p-2'
+            ),
+          loadingMessage: () => classNames('text-neutral-400', 'py-2', 'px-3'),
+          menu: () =>
+            classNames(
+              'bg-white',
+              'rounded',
+              'shadow-[0_0_0_1px_rgba(0,0,0,0.1)]',
+              'my-1'
+            ),
+          menuList: () => classNames('py-1'),
+          // menuPortal: () => classNames(),
+          multiValue: () => classNames('bg-neutral-100', 'rounded-sm', 'm-0.5'),
+          multiValueLabel: () => classNames('rounded-sm', 'text-neutral-800'),
+          multiValueRemove: ({ isFocused }) =>
+            classNames(
+              'rounded-sm',
+              isFocused && 'bg-red-500',
+              'px-1',
+              'hover:bg-red-500',
+              'hover:text-red-800'
+            ),
+          noOptionsMessage: () =>
+            classNames('text-neutral-400', 'py-2', 'px-3'),
+          option: ({ isDisabled, isFocused, isSelected }) =>
+            classNames(
+              isSelected
+                ? 'bg-purple-800'
+                : isFocused
+                ? 'bg-purple-300'
+                : 'bg-transparent',
+              isDisabled
+                ? 'text-neutral-200'
+                : isSelected
+                ? 'text-white'
+                : 'text-inherit',
+              'py-2',
+              'px-3',
+              !isDisabled &&
+                (isSelected ? 'active:bg-purple-800' : 'active:bg-purple-500')
+            ),
+          placeholder: () => classNames('text-neutral-500', 'mx-0.5'),
+          singleValue: ({ isDisabled }) =>
+            classNames(
+              isDisabled ? 'text-neutral-400' : 'text-neutral-800',
+              'mx-0.5'
+            ),
+          valueContainer: () => classNames('py-0.5', 'px-2'),
+        }}
+      />
+    </Field>
+  );
+};
+
+export const UnstyledWithTailwind = Template.bind({});
+UnstyledWithTailwind.args = {
+  ...defaultArgs,
+};
diff --git a/storybook/stories/WithTailwind.stories.tsx b/storybook/stories/WithTailwind.stories.tsx
deleted file mode 100644
index 1239b932d9..0000000000
--- a/storybook/stories/WithTailwind.stories.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import '../styles/tailwind.css';
-
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import * as React from 'react';
-import Select from 'react-select';
-
-import { Field } from '../components/field';
-import { defaultArgs } from '../data';
-
-export default {
-  title: 'Select/WithTailwind',
-  component: Select,
-  argTypes: {},
-} as ComponentMeta<typeof Select>;
-
-const Template: ComponentStory<typeof Select> = ({
-  inputId = 'react-select',
-  ...props
-}) => {
-  return (
-    <Field htmlFor={inputId}>
-      <Select
-        inputId={inputId}
-        {...props}
-        // TODO
-        styles={{
-          valueContainer: (base, { hasValue }) => {
-            return {
-              ...base,
-              backgroundColor: hasValue ? 'red' : 'blue',
-            };
-          },
-        }}
-        classNames={{
-          valueContainer: ({ hasValue }) =>
-            hasValue ? 'bg-green-200' : 'bg-blue-200',
-        }}
-      />
-    </Field>
-  );
-};
-
-export const WithTailwind = Template.bind({});
-WithTailwind.args = {
-  ...defaultArgs,
-};

From 0773095f4990b636f64ae7d0ab593353a1e03b22 Mon Sep 17 00:00:00 2001
From: alex <44968616+nderkim@users.noreply.github.com>
Date: Wed, 2 Nov 2022 15:25:28 +1100
Subject: [PATCH 03/12] Add changeset

---
 .changeset/weak-roses-decide.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/weak-roses-decide.md

diff --git a/.changeset/weak-roses-decide.md b/.changeset/weak-roses-decide.md
new file mode 100644
index 0000000000..1813fa1734
--- /dev/null
+++ b/.changeset/weak-roses-decide.md
@@ -0,0 +1,6 @@
+---
+'react-select': minor
+'@react-select/docs': patch
+---
+
+Add classNames API and unstyled prop

From edf5265ee0158c026c9e8527a6d0490a5ac2ef23 Mon Sep 17 00:00:00 2001
From: alex <44968616+nderkim@users.noreply.github.com>
Date: Thu, 3 Nov 2022 15:28:48 +1100
Subject: [PATCH 04/12] PR review changes

---
 docs/examples/Experimental.tsx                |  4 ++--
 packages/react-select/src/Select.tsx          |  8 ++++----
 .../react-select/src/components/Group.tsx     | 18 +++++++++---------
 .../src/components/MultiValue.tsx             |  6 +++---
 packages/react-select/src/types.ts            |  2 +-
 packages/react-select/src/utils.ts            |  8 ++++----
 .../stories/UnstyledWithTailwind.stories.tsx  | 19 +++++++++++++++++--
 7 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/docs/examples/Experimental.tsx b/docs/examples/Experimental.tsx
index 236d6d0d9f..7bc4a0e90f 100644
--- a/docs/examples/Experimental.tsx
+++ b/docs/examples/Experimental.tsx
@@ -123,7 +123,7 @@ const Group = (props: GroupProps<DateOption, false>) => {
   const {
     Heading,
     getStyles,
-    getClassName,
+    getClassNames,
     children,
     label,
     headingProps,
@@ -137,7 +137,7 @@ const Group = (props: GroupProps<DateOption, false>) => {
         selectProps={selectProps}
         theme={theme}
         getStyles={getStyles}
-        getClassName={getClassName}
+        getClassNames={getClassNames}
         cx={cx}
         {...headingProps}
       >
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 5c6463ec4b..9a029f31b0 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -105,7 +105,7 @@ export interface Props<
    */
   classNamePrefix?: string | null;
   /**
-   * Provide a className based on state for each inner component
+   * Provide classNames based on state for each inner component
    */
   classNames: ClassNamesConfig<Option, IsMulti, Group>;
   /** Close the select menu when the user selects an option */
@@ -1059,7 +1059,7 @@ export default class Select<
       clearValue,
       cx,
       getStyles,
-      getClassName,
+      getClassNames,
       getValue,
       selectOption,
       setValue,
@@ -1072,7 +1072,7 @@ export default class Select<
       clearValue,
       cx,
       getStyles,
-      getClassName,
+      getClassNames,
       getValue,
       hasValue,
       isMulti,
@@ -1101,7 +1101,7 @@ export default class Select<
     const custom = this.props.styles[key];
     return custom ? custom(base, props as any) : base;
   };
-  getClassName = <Key extends keyof StylesProps<Option, IsMulti, Group>>(
+  getClassNames = <Key extends keyof StylesProps<Option, IsMulti, Group>>(
     key: Key,
     props: StylesProps<Option, IsMulti, Group>[Key]
   ) => this.props.classNames[key]?.(props as any);
diff --git a/packages/react-select/src/components/Group.tsx b/packages/react-select/src/components/Group.tsx
index 3daa87ca6f..0e5bf154ec 100644
--- a/packages/react-select/src/components/Group.tsx
+++ b/packages/react-select/src/components/Group.tsx
@@ -69,7 +69,7 @@ const Group = <
     children,
     cx,
     getStyles,
-    getClassName,
+    getClassNames,
     Heading,
     headingProps,
     innerProps,
@@ -84,7 +84,7 @@ const Group = <
         selectProps={selectProps}
         theme={theme}
         getStyles={getStyles}
-        getClassName={getClassName}
+        getClassNames={getClassNames}
         cx={cx}
       >
         {label}
@@ -103,7 +103,7 @@ interface GroupHeadingPropsDefinedProps<
   selectProps: Props<Option, IsMulti, Group>;
   theme: Theme;
   getStyles: GetStyles<Option, IsMulti, Group>;
-  getClassName: CommonProps<Option, IsMulti, Group>['getClassName'];
+  getClassNames: CommonProps<Option, IsMulti, Group>['getClassNames'];
   cx: CX;
 }
 
@@ -119,22 +119,22 @@ export const groupHeadingCSS = <
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 >(
-  { theme: { spacing } }: GroupHeadingProps<Option, IsMulti, Group>,
+  { theme: { colors, spacing } }: GroupHeadingProps<Option, IsMulti, Group>,
   unstyled: boolean
 ): CSSObjectWithLabel => ({
   label: 'group',
-  color: '#999',
   cursor: 'default',
   display: 'block',
-  fontSize: '75%',
-  fontWeight: 500,
-  marginBottom: '0.25em',
-  textTransform: 'uppercase',
   ...(unstyled
     ? {}
     : {
+        color: colors.neutral40,
+        fontSize: '75%',
+        fontWeight: 500,
+        marginBottom: '0.25em',
         paddingLeft: spacing.baseUnit * 3,
         paddingRight: spacing.baseUnit * 3,
+        textTransform: 'uppercase',
       }),
 });
 
diff --git a/packages/react-select/src/components/MultiValue.tsx b/packages/react-select/src/components/MultiValue.tsx
index b0ee146141..7fbf90db53 100644
--- a/packages/react-select/src/components/MultiValue.tsx
+++ b/packages/react-select/src/components/MultiValue.tsx
@@ -69,10 +69,7 @@ export const multiValueLabelCSS = <
   }: MultiValueProps<Option, IsMulti, Group>,
   unstyled: boolean
 ): CSSObjectWithLabel => ({
-  fontSize: '85%',
   overflow: 'hidden',
-  padding: 3,
-  paddingLeft: 6,
   textOverflow:
     cropWithEllipsis || cropWithEllipsis === undefined ? 'ellipsis' : undefined,
   whiteSpace: 'nowrap',
@@ -81,6 +78,9 @@ export const multiValueLabelCSS = <
     : {
         borderRadius: borderRadius / 2,
         color: colors.neutral80,
+        fontSize: '85%',
+        padding: 3,
+        paddingLeft: 6,
       }),
 });
 
diff --git a/packages/react-select/src/types.ts b/packages/react-select/src/types.ts
index cebf96a52f..516b657aed 100644
--- a/packages/react-select/src/types.ts
+++ b/packages/react-select/src/types.ts
@@ -82,7 +82,7 @@ export interface CommonProps<
     See the `styles` object for the properties available.
   */
   getStyles: GetStyles<Option, IsMulti, Group>;
-  getClassName: <Key extends keyof StylesProps<Option, IsMulti, Group>>(
+  getClassNames: <Key extends keyof StylesProps<Option, IsMulti, Group>>(
     propertyName: Key,
     props: StylesProps<Option, IsMulti, Group>[Key]
   ) => string | undefined;
diff --git a/packages/react-select/src/utils.ts b/packages/react-select/src/utils.ts
index df446971cf..5fb746ac55 100644
--- a/packages/react-select/src/utils.ts
+++ b/packages/react-select/src/utils.ts
@@ -94,7 +94,7 @@ export const cleanCommonProps = <
     clearValue,
     cx,
     getStyles,
-    getClassName,
+    getClassNames,
     getValue,
     hasValue,
     isMulti,
@@ -121,16 +121,16 @@ export const getStyleProps = <
 >(
   props: Pick<
     CommonPropsAndClassName<Option, IsMulti, Group>,
-    'cx' | 'getStyles' | 'getClassName' | 'className'
+    'cx' | 'getStyles' | 'getClassNames' | 'className'
   > &
     StylesProps<Option, IsMulti, Group>[Key],
   name: Key,
   classNamesState?: ClassNamesState
 ) => {
-  const { cx, getStyles, getClassName, className } = props;
+  const { cx, getStyles, getClassNames, className } = props;
   return {
     css: getStyles(name, props),
-    className: cx(classNamesState ?? {}, getClassName(name, props), className),
+    className: cx(classNamesState ?? {}, getClassNames(name, props), className),
   };
 };
 
diff --git a/storybook/stories/UnstyledWithTailwind.stories.tsx b/storybook/stories/UnstyledWithTailwind.stories.tsx
index 807b44e1f4..4c3262a869 100644
--- a/storybook/stories/UnstyledWithTailwind.stories.tsx
+++ b/storybook/stories/UnstyledWithTailwind.stories.tsx
@@ -53,7 +53,15 @@ const Template: ComponentStory<typeof Select> = ({
               isFocused ? 'hover:text-neutral-800' : 'hover:text-neutral-400'
             ),
           group: () => classNames('py-2'),
-          groupHeading: () => classNames('px-3'),
+          groupHeading: () =>
+            classNames(
+              'text-neutral-400',
+              'text-xs',
+              'font-medium',
+              'mb-1',
+              'px-3',
+              'uppercase'
+            ),
           // indicatorsContainer: () => classNames(),
           indicatorSeparator: ({ isDisabled }) =>
             classNames(
@@ -77,7 +85,14 @@ const Template: ComponentStory<typeof Select> = ({
           menuList: () => classNames('py-1'),
           // menuPortal: () => classNames(),
           multiValue: () => classNames('bg-neutral-100', 'rounded-sm', 'm-0.5'),
-          multiValueLabel: () => classNames('rounded-sm', 'text-neutral-800'),
+          multiValueLabel: () =>
+            classNames(
+              'rounded-sm',
+              'text-neutral-800',
+              'text-sm',
+              'p-[3]',
+              'pl-[6]'
+            ),
           multiValueRemove: ({ isFocused }) =>
             classNames(
               'rounded-sm',

From ed2ee59c251235291f3fb71b2e7b04ec3cf29944 Mon Sep 17 00:00:00 2001
From: alex <44968616+nderkim@users.noreply.github.com>
Date: Fri, 4 Nov 2022 09:04:37 +1100
Subject: [PATCH 05/12] Add storybook to docs

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1bc42ae121..9124282c7d 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,7 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "start": "cd docs && yarn start",
     "start:test": "cd docs && yarn start:test",
-    "build:docs": "cd docs && yarn build:docs",
+    "build:docs": "yarn --cwd=docs build:docs && yarn --cwd=storybook build && cp -r storybook/storybook-static docs/dist/storybook",
     "fresh": "rm -rf node_modules && yarn install",
     "test": "npm run test:jest && npm run test:cypress",
     "test:jest": "jest --coverage",

From 4cb7b335cfa35141113ed56bb1db4531b1745387 Mon Sep 17 00:00:00 2001
From: Luke Bennett <hello@lukebennett.com.au>
Date: Fri, 4 Nov 2022 11:53:16 +1100
Subject: [PATCH 06/12] Add docs

---
 docs/index.css              |   5 +-
 docs/pages/styles/index.tsx | 288 +++++++++++++++++-------------------
 2 files changed, 136 insertions(+), 157 deletions(-)

diff --git a/docs/index.css b/docs/index.css
index e0fc48962c..27281e215c 100644
--- a/docs/index.css
+++ b/docs/index.css
@@ -15,7 +15,10 @@ body {
 }
 p > a,
 p > a:hover,
-p > a:visited {
+p > a:visited,
+li > a,
+li > a:hover,
+li > a:visited {
   color: #2684ff;
 }
 code {
diff --git a/docs/pages/styles/index.tsx b/docs/pages/styles/index.tsx
index ba6754c518..d6a0b83c62 100644
--- a/docs/pages/styles/index.tsx
+++ b/docs/pages/styles/index.tsx
@@ -26,146 +26,128 @@ export default function Styles() {
       {md`
     # Styles
 
-    React-Select offers a flexible, light-weight styling framework which is
-    a thin abstraction over simple javascript objects using
-    [emotion](https://emotion.sh/).
+    React Select offers 3 main APIs for styling;
+
+    - [The styles prop](#the-styles-prop)
+    - [The classNames prop](#the-classnames-prop)
+    - [The classNamePrefix prop](#the-classnameprefix-prop)
+
+    ## The styles prop
+
+    The recommended way to provide custom styles to \`react-select\` is to use the \`styles\` prop.
+    \`styles\` takes an object with [keys](#todo) to represent the various [inner components](#todo) that \`react-select\` is made up of.
+    Each inner component takes a callback function with the following signature;
 
     ~~~jsx
-    /**
-     * @param {Object} provided -- the component's default styles
-     * @param {Object} state -- the component's current state e.g. \`isFocused\`
-     * @returns {Object}
-     */
-    function styleFn(provided, state) {
-      return { ...provided, color: state.isFocused ? 'blue' : 'red' };
-    }
+    <Select
+      styles={{
+        control: (baseStyles, state) => ({
+          ...baseStyles,
+          borderColor: state.isFocused ? 'grey' : 'red',
+        }),
+      }}
+    />
     ~~~
 
-    ## Style Object
-
-    Each component is keyed, and ships with default styles. The component's
-    default style object is passed as the first argument to the function
-    when it's resolved.
-
-    The second argument is the current state of the select, features like
-    \`isFocused\`, \`isSelected\` etc. allowing you to
-    implement dynamic styles for each of the components.
-
-    ###### Style Keys
-
-    - \`clearIndicator\`
-    - \`container\`
-    - \`control\`
-    - \`dropdownIndicator\`
-    - \`group\`
-    - \`groupHeading\`
-    - \`indicatorsContainer\`
-    - \`indicatorSeparator\`
-    - \`input\`
-    - \`loadingIndicator\`
-    - \`loadingMessage\`
-    - \`menu\`
-    - \`menuList\`
-    - \`menuPortal\`
-    - \`multiValue\`
-    - \`multiValueLabel\`
-    - \`multiValueRemove\`
-    - \`noOptionsMessage\`
-    - \`option\`
-    - \`placeholder\`
-    - \`singleValue\`
-    - \`valueContainer\`
-
-    ## Provided Styles and State
-
-    Spreading the provided styles into your returned object lets you extend it
-    however you like while maintaining existing styles. Alternatively, you
-    can omit the provided styles and completely take control of the component's styles.
+    The first argument is an object with the base styles. Spreading the base styles into your returned object lets you extend it however you like while maintaining existing styles. Alternatively, you can omit the provided styles and completely take control of the component's styles.
+
+    The second argument is the current state (features like \`isFocused\`, \`isSelected\` etc). This allows you to implement dynamic styles for each of the components.
+
+    ## The classNames prop
+
+    As of version \`5.7.0\` of \`react-select\` you can now use the \`classNames\` prop for styling. Note: this is not to be confused with the \`className\` prop, which will add a class to the component.
+
+    \`classNames\` takes an object with [keys](#todo) to represent the various [inner components](#todo) that \`react-select\` is made up of.
+    Each inner component takes a callback function with the following signature;
 
     ~~~jsx
-    const customStyles = {
-      option: (provided, state) => ({
-        ...provided,
-        borderBottom: '1px dotted pink',
-        color: state.isSelected ? 'red' : 'blue',
-        padding: 20,
-      }),
-      control: () => ({
-        // none of react-select's styles are passed to <Control />
-        width: 200,
-      }),
-      singleValue: (provided, state) => {
-        const opacity = state.isDisabled ? 0.5 : 1;
-        const transition = 'opacity 300ms';
-
-        return { ...provided, opacity, transition };
-      }
-    }
-
-      const App = () => (
-        <Select
-          styles={customStyles}
-          options={...}
-        />
-      );
-      ~~~
+    <Select
+      classNames={{
+        control: (state) =>
+          state.isFocused ? 'border-red-600' : 'border-grey-300',
+      }}
+    />
+    ~~~
+
+    ### Note on CSS specificity
+
+    If you are using the \`classNames\` API and you are trying to override some base styles with the same level of specificity, you must ensure that your provided styles are declared later than the styles from React Select (e.g. the \`link\` or \`style\` tag in the head of your HTML document) in order for them to take precedence.
+
+    For an example on how you might want to do this, see the [Storybook example here](https://github.com/JedWatson/react-select/master/storybook/stories/ClassNamesWithTailwind.stories.tsx).
+
+    ## The unstyled prop
 
+    If you are trying to style everything from scratch you can use the \`unstyled\` prop. This removes all the presentational styles from React Select (leaving some important functional styles, like those for menu positioning and input width in multi select).
 
-    ## Select Props
-    In the second argument \`state\`, you have access to \`selectProps\` which will allow you to gain access to
-    your own arguments passed into the \`Select\` body.
+    This will make it easier to completely specify your own \`styles\` _or_ \`classNames\` to control the look of React Select, without having to specifically override the default theme we apply.
+
+    ## Inner components
+
+    <details>
+    <summary>See list of keys for all of React Select's inner components</summary>
+      <ul>
+        <li>clearIndicator</li>
+        <li>container</li>
+        <li>control</li>
+        <li>dropdownIndicator</li>
+        <li>group</li>
+        <li>groupHeading</li>
+        <li>indicatorsContainer</li>
+        <li>indicatorSeparator</li>
+        <li>input</li>
+        <li>loadingIndicator</li>
+        <li>loadingMessage</li>
+        <li>menu</li>
+        <li>menuList</li>
+        <li>menuPortal</li>
+        <li>multiValue</li>
+        <li>multiValueLabel</li>
+        <li>multiValueRemove</li>
+        <li>noOptionsMessage</li>
+        <li>option</li>
+        <li>placeholder</li>
+        <li>singleValue</li>
+        <li>valueContainer</li>
+      </ul>
+    </details>
+
+    ## The classNamePrefix prop
+
+    If you provide the \`classNamePrefix\` prop to React Select, all inner elements will be given a className with the provided prefix.
+
+    Given the following JSX:
 
     ~~~jsx
-    const customStyles = {
-      menu: (provided, state) => ({
-        ...provided,
-        width: state.selectProps.width,
-        borderBottom: '1px dotted pink',
-        color: state.selectProps.menuColor,
-        padding: 20,
-      }),
-
-      control: (_, { selectProps: { width }}) => ({
-        width: width
-      }),
-
-      singleValue: (provided, state) => {
-        const opacity = state.isDisabled ? 0.5 : 1;
-        const transition = 'opacity 300ms';
-
-        return { ...provided, opacity, transition };
-      }
-    }
-
-      const App = () => (
-        <Select
-          styles={customStyles}
-          width='200px'
-          menuColor='red'
-          options={...}
-        />
-      );
-      ~~~
+    <Select
+      {...props}
+      className="react-select-container"
+      classNamePrefix="react-select"
+    />
+    ~~~
+
+    ...the DOM structure is similar to this:
+
+    ~~~html
+    <div class="react-select-container">
+      <div class="react-select__control">
+        <div class="react-select__value-container">...</div>
+        <div class="react-select__indicators">...</div>
+      </div>
+      <div class="react-select__menu">
+        <div class="react-select__menu-list">
+          <div class="react-select__option">...</div>
+        </div>
+      </div>
+    </div>
+    ~~~
+
+    ## Select props
+
+    In the \`state\` argument for both the \`styles\` and \`classNames\` API, you have access to \`selectProps\` which will allow you to gain access to your own arguments passed into the Select body.
+
+
 
-      ${(
-        <ExampleWrapper
-          label="Customised Styles for Single Select"
-          urlPath="docs/examples/StyledSingle.tsx"
-          raw={require('!!raw-loader!../../examples/StyledSingle.tsx')}
-        >
-          <StyledSingle />
-        </ExampleWrapper>
-      )}
 
-      ${(
-        <ExampleWrapper
-          label="Customised styles for Multi Select"
-          urlPath="docs/examples/StyledMulti.tsx"
-          raw={require('!!raw-loader!../../examples/StyledMulti.tsx')}
-        >
-          <StyledMulti />
-        </ExampleWrapper>
-      )}
 
     ## cx and custom Components
 
@@ -234,34 +216,6 @@ export default function Styles() {
       </ExampleWrapper>
     )}
 
-    ## Using classNames
-
-    If you provide the \`className\` prop to react-select, the SelectContainer will be given a className based on the provided value.
-
-    If you provide the \`classNamePrefix\` prop to react-select, all inner elements will be given a className
-    with the provided prefix.
-
-    For example, given \`className='react-select-container'\` and \`classNamePrefix="react-select"\`,
-    the DOM structure is similar to this:
-
-    ~~~html
-    <div class="react-select-container">
-      <div class="react-select__control">
-        <div class="react-select__value-container">...</div>
-        <div class="react-select__indicators">...</div>
-      </div>
-      <div class="react-select__menu">
-        <div class="react-select__menu-list">
-          <div class="react-select__option">...</div>
-        </div>
-      </div>
-    </div>
-    ~~~
-
-    While we encourage you to use the new Styles API, you still have the option of styling via CSS classes.
-    This ensures compatibility with [styled components](https://www.styled-components.com/),
-    [CSS modules](https://github.com/css-modules/css-modules) and other libraries.
-
     ## Overriding the theme
 
     The default styles are derived from a theme object, which you can mutate like \`styles\`.
@@ -292,6 +246,28 @@ export default function Styles() {
       </div>
     )}
 
+    ## Examples
+
+      ${(
+        <ExampleWrapper
+          label="Customised Styles for Single Select"
+          urlPath="docs/examples/StyledSingle.tsx"
+          raw={require('!!raw-loader!../../examples/StyledSingle.tsx')}
+        >
+          <StyledSingle />
+        </ExampleWrapper>
+      )}
+
+      ${(
+        <ExampleWrapper
+          label="Customised styles for Multi Select"
+          urlPath="docs/examples/StyledMulti.tsx"
+          raw={require('!!raw-loader!../../examples/StyledMulti.tsx')}
+        >
+          <StyledMulti />
+        </ExampleWrapper>
+      )}
+
     `}
     </Fragment>
   );

From 3bc3d6d9c3d89cfa356fe1f057d78de05d16924c Mon Sep 17 00:00:00 2001
From: alex <44968616+nderkim@users.noreply.github.com>
Date: Fri, 4 Nov 2022 12:11:42 +1100
Subject: [PATCH 07/12] Minor fixes to docs

---
 docs/pages/styles/index.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/pages/styles/index.tsx b/docs/pages/styles/index.tsx
index d6a0b83c62..e113c6e997 100644
--- a/docs/pages/styles/index.tsx
+++ b/docs/pages/styles/index.tsx
@@ -26,7 +26,7 @@ export default function Styles() {
       {md`
     # Styles
 
-    React Select offers 3 main APIs for styling;
+    React Select offers 3 main APIs for styling:
 
     - [The styles prop](#the-styles-prop)
     - [The classNames prop](#the-classnames-prop)
@@ -35,8 +35,8 @@ export default function Styles() {
     ## The styles prop
 
     The recommended way to provide custom styles to \`react-select\` is to use the \`styles\` prop.
-    \`styles\` takes an object with [keys](#todo) to represent the various [inner components](#todo) that \`react-select\` is made up of.
-    Each inner component takes a callback function with the following signature;
+    \`styles\` takes an object with keys to represent the various [inner components](#inner-components) that \`react-select\` is made up of.
+    Each inner component takes a callback function with the following signature:
 
     ~~~jsx
     <Select
@@ -57,8 +57,8 @@ export default function Styles() {
 
     As of version \`5.7.0\` of \`react-select\` you can now use the \`classNames\` prop for styling. Note: this is not to be confused with the \`className\` prop, which will add a class to the component.
 
-    \`classNames\` takes an object with [keys](#todo) to represent the various [inner components](#todo) that \`react-select\` is made up of.
-    Each inner component takes a callback function with the following signature;
+    \`classNames\` takes an object with keys to represent the various [inner components](#inner-components) that \`react-select\` is made up of.
+    Each inner component takes a callback function with the following signature:
 
     ~~~jsx
     <Select
@@ -73,7 +73,7 @@ export default function Styles() {
 
     If you are using the \`classNames\` API and you are trying to override some base styles with the same level of specificity, you must ensure that your provided styles are declared later than the styles from React Select (e.g. the \`link\` or \`style\` tag in the head of your HTML document) in order for them to take precedence.
 
-    For an example on how you might want to do this, see the [Storybook example here](https://github.com/JedWatson/react-select/master/storybook/stories/ClassNamesWithTailwind.stories.tsx).
+    For an example on how you might want to do this, see the [Storybook example here](https://github.com/JedWatson/react-select/blob/master/storybook/stories/ClassNamesWithTailwind.stories.tsx).
 
     ## The unstyled prop
 
@@ -84,7 +84,7 @@ export default function Styles() {
     ## Inner components
 
     <details>
-    <summary>See list of keys for all of React Select's inner components</summary>
+      <summary>See list of keys for all of React Select's inner components</summary>
       <ul>
         <li>clearIndicator</li>
         <li>container</li>

From 1d0d22f2ffdb084cf664bea49d88fd6edf4e6ad9 Mon Sep 17 00:00:00 2001
From: alex <44968616+nderkim@users.noreply.github.com>
Date: Fri, 4 Nov 2022 12:58:06 +1100
Subject: [PATCH 08/12] Show raw source code in storybook docs

---
 storybook/.storybook/preview.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/storybook/.storybook/preview.tsx b/storybook/.storybook/preview.tsx
index d9463a953f..3d007bc38c 100644
--- a/storybook/.storybook/preview.tsx
+++ b/storybook/.storybook/preview.tsx
@@ -12,6 +12,11 @@ export const parameters = {
       ],
     },
   },
+  docs: {
+    source: {
+      type: 'code',
+    },
+  },
 };
 
 const globalStyles = css`

From 2f5f0444ddd8e4a2b458e5c79ef9d4d0b41bbab1 Mon Sep 17 00:00:00 2001
From: Luke Bennett <hello@lukebennett.com.au>
Date: Fri, 4 Nov 2022 14:07:59 +1100
Subject: [PATCH 09/12] Export type

---
 packages/react-select/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-select/src/index.ts b/packages/react-select/src/index.ts
index c0ea65444a..6cee84dfb9 100644
--- a/packages/react-select/src/index.ts
+++ b/packages/react-select/src/index.ts
@@ -41,7 +41,7 @@ export type { OptionProps } from './components/Option';
 export type { PlaceholderProps } from './components/Placeholder';
 export type { SingleValueProps } from './components/SingleValue';
 export type { ThemeConfig } from './theme';
-export type { StylesConfig } from './styles';
+export type { ClassNamesConfig, StylesConfig } from './styles';
 export * from './types';
 export type {
   OptionContext,

From 153107d0229078d437167ef87258c3e4ca4cabde Mon Sep 17 00:00:00 2001
From: Luke Bennett <luke.bennett@thinkmill.com.au>
Date: Fri, 4 Nov 2022 15:51:52 +1100
Subject: [PATCH 10/12] Update packages/react-select/src/styles.ts

---
 packages/react-select/src/styles.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-select/src/styles.ts b/packages/react-select/src/styles.ts
index a28181567a..ef7ee2c79f 100644
--- a/packages/react-select/src/styles.ts
+++ b/packages/react-select/src/styles.ts
@@ -120,9 +120,9 @@ export type StylesConfig<
 };
 
 export type ClassNamesConfig<
-  Option,
-  IsMulti extends boolean,
-  Group extends GroupBase<Option>
+	Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
 > = {
   [K in keyof StylesProps<Option, IsMulti, Group>]?: (
     props: StylesProps<Option, IsMulti, Group>[K]

From b0eb55c39bae307ebbbb59feb19505568e11a4e2 Mon Sep 17 00:00:00 2001
From: alex <44968616+nderkim@users.noreply.github.com>
Date: Fri, 4 Nov 2022 16:21:46 +1100
Subject: [PATCH 11/12] Fix lint

---
 packages/react-select/src/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-select/src/styles.ts b/packages/react-select/src/styles.ts
index ef7ee2c79f..0e0e1b863b 100644
--- a/packages/react-select/src/styles.ts
+++ b/packages/react-select/src/styles.ts
@@ -120,7 +120,7 @@ export type StylesConfig<
 };
 
 export type ClassNamesConfig<
-	Option = unknown,
+  Option = unknown,
   IsMulti extends boolean = boolean,
   Group extends GroupBase<Option> = GroupBase<Option>
 > = {

From 56a56c4b9a7f6bc96dd348cf17abac086d678e75 Mon Sep 17 00:00:00 2001
From: alex <44968616+nderkim@users.noreply.github.com>
Date: Fri, 4 Nov 2022 16:18:52 +1100
Subject: [PATCH 12/12] Fix heading style

---
 docs/markdown/renderer.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/markdown/renderer.tsx b/docs/markdown/renderer.tsx
index 2bd09d27c4..f2c4202570 100644
--- a/docs/markdown/renderer.tsx
+++ b/docs/markdown/renderer.tsx
@@ -105,8 +105,7 @@ const Heading = (props: HeadingProps) => {
     store.add(nodeKey, { key: nodeKey, label, level, path: `#${slug}` });
   }
   const css = {
-    marginTop: 0,
-    '&:not(:first-of-type)': { marginTop: 30 },
+    '&:first-child': { marginTop: 0 },
   };
 
   return linkify ? (