adds synth styles to single select

src/Select/AsyncCreatableSelect.jsx

@@ -38,6 +38,7 @@ const AsyncCreatableSelect = ({
     aria-label={ariaLabel}
     aria-labelledby={ariaLabelledBy}
     className={`${className || ''} AsyncSelect`}
+    classNamePrefix="Select"
     components={components}
     defaultOptions={defaultOptions}
     defaultValue={defaultValue}

src/Select/AsyncSelect.jsx

@@ -38,6 +38,7 @@ const AsyncSelect = ({
     aria-label={ariaLabel}
     aria-labelledby={ariaLabelledBy}
     className={`${className || ''} AsyncSelect`}
+    classNamePrefix="Select"
     components={components}
     defaultOptions={defaultOptions}
     defaultValue={defaultValue}

src/Select/CreatableSelect.jsx

@@ -34,6 +34,7 @@ const CreatableSelect = ({
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     className={`${className || ''} CreatableSelect`}
+    classNamePrefix="Select"
     components={components}
     defaultValue={defaultValue}
     disabled={disabled}

src/Select/SingleSelect.jsx

@@ -4,6 +4,7 @@ import Select from 'react-select';
 import propTypes from 'prop-types';
 
 import zStack from 'src/Styles/zStack';
+import './select.scss';
 
 import { defaultTheme, defaultStyles, SELECT_SIZES } from './styles';
 
@@ -38,6 +39,7 @@ const SingleSelect = ({
     aria-label={ariaLabel}
     aria-labelledby={ariaLabelledBy}
     className={classNames('SingleSelect', className)}
+    classNamePrefix="Select"
     closeMenuOnSelect={closeMenuOnSelect}
     components={components}
     defaultValue={defaultValue}

src/Select/select.scss

@@ -0,0 +1,32 @@
+@import '../../scss/theme.scss';
+// Note: react-select is largely styled via css-in-js, not SCSS. 
+// However, we need to only provide the styles below when the "Synthesized"
+// class is present on the body in rails server
+
+.Synthesized .Select__menu {
+  .Select__option:hover,
+  .Select__option--is-focused {
+    background-color: $synth-hover-state;
+  }
+
+  .Select__option--is-selected,
+  .Select__option--is-selected:hover {
+    background-color: $synth-selected-state-green;
+  }
+}
+
+.Select__control {
+  .Select__multi-value__label,
+  .Select__multi-value__remove {
+    color: $synth-success-green-dark;
+  }
+
+  .Select__multi-value__remove:hover {
+    background-color: $synth-selected-state-green;
+    color: $synth-success-green-dark;
+  }
+
+  .Select__multi-value {
+    background-color: $synth-hover-state;
+  }
+}