COMPLETE React Select style-api CSS & TypeDef guide

[cpnvr]

I just made this reference guide and thought I'd post it here for the community as well. I couldn't find a handy style-api reference with this kind of granular depth so I went ahead and made one myself!

Links are relative to where the files appear locally in your repo when react-select is added as a dependency.

REACT SELECT STYLE-API REFERENCE

Style Constants

<node_modules/react-select/src/styles.js>

	export const defaultStyles: Styles = {
	  clearIndicator: clearIndicatorCSS,
	  container: containerCSS,
	  control: controlCSS,
	  dropdownIndicator: dropdownIndicatorCSS,
	  group: groupCSS,
	  groupHeading: groupHeadingCSS,
	  indicatorsContainer: indicatorsContainerCSS,
	  indicatorSeparator: indicatorSeparatorCSS,
	  input: inputCSS,
	  loadingIndicator: loadingIndicatorCSS,
	  loadingMessage: loadingMessageCSS,
	  menu: menuCSS,
	  menuList: menuListCSS,
	  menuPortal: menuPortalCSS,
	  multiValue: multiValueCSS,
	  multiValueLabel: multiValueLabelCSS,
	  multiValueRemove: multiValueRemoveCSS,
	  noOptionsMessage: noOptionsMessageCSS,
	  option: optionCSS,
	  placeholder: placeholderCSS,
	  singleValue: singleValueCSS,
	  valueContainer: valueContainerCSS,
	};

clearIndicator

<node_modules/react-select/src/components/indicators.js>

    label: string;
    color: string;
    display: string;
    padding: number;
    transition: string;
    ':hover': {
        color: string;
    };

container

<node_modules/react-select/src/components/containers.js>

	type ContainerState = {
	    isDisabled: boolean;
	    isRtl: boolean;
	}
	
	export const containerCSS = ({ isDisabled, isRtl }: ContainerState) => ({
	  label: 'container',
	  direction: isRtl ? 'rtl' : null,
	  pointerEvents: isDisabled ? 'none' : null, // cancel mouse events when disabled
	  position: 'relative',
	});

control

<node_modules/react-select/src/components/Control.js>

	export const css = ({
	  isDisabled,
	  isFocused,
	  theme: { colors, borderRadius, spacing },
	}: ControlProps) => ({
	  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}` : null,
	  cursor: 'default',
	  display: 'flex',
	  flexWrap: 'wrap',
	  justifyContent: 'space-between',
	  minHeight: spacing.controlHeight,
	  outline: '0 !important',
	  position: 'relative',
	  transition: 'all 100ms',
	
	  '&:hover': {
	    borderColor: isFocused ? colors.primary : colors.neutral30,
	  },
	});

dropdownIndicator

<node_modules/react-select/src/components/indicators.js>

	export const dropdownIndicatorCSS = baseCSS;
	
	const baseCSS: ({ isFocused, theme: { spacing: { baseUnit }, colors, }, }: IndicatorProps) => {
	    label: string;
	    color: string;
	    display: string;
	    padding: number;
	    transition: string;
	    ':hover': {
	        color: string;
	    };
	}

group

<node_modules/react-select/src/components/Group.js>

	export const groupCSS = ({ theme: { spacing } }: GroupProps) => ({
	  paddingBottom: spacing.baseUnit * 2,
	  paddingTop: spacing.baseUnit * 2,
	});

	export type Theme = {
	  borderRadius: number,
	  colors: { [key: string]: string },
	  spacing: ThemeSpacing,
	};

	type ThemeSpacing = {
	  baseUnit: number,
	  controlHeight: number,
	  menuGutter: number,
	};

groupHeading

<node_modules/react-select/src/components/Group.js>

	export const groupHeadingCSS = ({ theme: { spacing } }: GroupProps) => ({
	  label: 'group',
	  color: '#999',
	  cursor: 'default',
	  display: 'block',
	  fontSize: '75%',
	  fontWeight: '500',
	  marginBottom: '0.25em',
	  paddingLeft: spacing.baseUnit * 3,
	  paddingRight: spacing.baseUnit * 3,
	  textTransform: 'uppercase',
	});


	type ThemeSpacing = {
	  baseUnit: number,
	  controlHeight: number,
	  menuGutter: number,
	};

indicatorsContainer

<node_modules/react-select/src/components/containers.js>

	export const indicatorsContainerCSS = () => ({
	  alignItems: 'center',
	  alignSelf: 'stretch',
	  display: 'flex',
	  flexShrink: 0,
	});

indicatorSeparator

<node_modules/react-select/src/components/indicators.js>

	export const indicatorSeparatorCSS = ({
	  isDisabled,
	  theme: {
	    spacing: { baseUnit },
	    colors,
	  },
	}: CommonProps & SeparatorState) => ({
	  label: 'indicatorSeparator',
	  alignSelf: 'stretch',
	  backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20,
	  marginBottom: baseUnit * 2,
	  marginTop: baseUnit * 2,
	  width: 1,
	});

	type ThemeSpacing = {
	  baseUnit: number,
	  controlHeight: number,
	  menuGutter: number,
	};

input

<node_modules/react-select/src/components/Input.js>

	export const inputCSS = ({
	  isDisabled,
	  theme: { spacing, colors },
	}: InputProps) => ({
	  margin: spacing.baseUnit / 2,
	  paddingBottom: spacing.baseUnit / 2,
	  paddingTop: spacing.baseUnit / 2,
	  visibility: isDisabled ? 'hidden' : 'visible',
	  color: colors.neutral80,
	});
	const inputStyle = isHidden => ({
	  label: 'input',
	  background: 0,
	  border: 0,
	  fontSize: 'inherit',
	  opacity: isHidden ? 0 : 1,
	  outline: 0,
	  padding: 0,
	  color: 'inherit',
	});

	export type Theme = {
	  borderRadius: number,
	  colors: { [key: string]: string },
	  spacing: ThemeSpacing,
	};
	
	type ThemeSpacing = {
	  baseUnit: number,
	  controlHeight: number,
	  menuGutter: number,
	};

	export type InputProps = CommonProps & {
	  /** Reference to the internal element */
	  innerRef: (ElementRef<*>) => void,
	  /** Set whether the input should be visible. Does not affect input size. */
	  isHidden: boolean,
	  /** Whether the input is disabled */
	  isDisabled?: boolean,
	  /** The ID of the form that the input belongs to */
	  form?: string,
	};

loadingIndicator

<node_modules/react-select/src/components/indicators.js>

	export const loadingIndicatorCSS = ({
	  isFocused,
	  size,
	  theme: {
	    colors,
	    spacing: { baseUnit },
	  },
	}: {
	  isFocused: boolean,
	  size: number,
	  theme: Theme,
	}) => ({
	  label: 'loadingIndicator',
	  color: isFocused ? colors.neutral60 : colors.neutral20,
	  display: 'flex',
	  padding: baseUnit * 2,
	  transition: 'color 150ms',
	  alignSelf: 'center',
	  fontSize: size,
	  lineHeight: 1,
	  marginRight: size,
	  textAlign: 'center',
	  verticalAlign: 'middle',
	});

	type ThemeSpacing = {
	  baseUnit: number,
	  controlHeight: number,
	  menuGutter: number,
	};

loadingMessage

<node_modules/react-select/src/components/Menu.js>

	export const loadingMessageCSS = noticeCSS;

	const noticeCSS = ({
	  theme: {
	    spacing: { baseUnit },
	    colors,
	  },
	}: NoticeProps) => ({
	  color: colors.neutral40,
	  padding: `${baseUnit * 2}px ${baseUnit * 3}px`,
	  textAlign: 'center',
	});

menu

<node_modules/react-select/src/components/Menu.js>

	export const menuCSS = ({
	  placement,
	  theme: { borderRadius, spacing, colors },
	}: MenuStateWithProps) => ({
	  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,
	});

	type MenuStateWithProps = MenuState & MenuProps;

	type MenuState = {
	  placement: 'bottom' | 'top' | null,
	  maxHeight: number,
	};

	export type MenuProps = MenuAndPlacerCommon & {
	  /** Reference to the internal element, consumed by the MenuPlacer component */
	  innerRef: ElementRef<*>,
	  /** The children to be rendered. */
	  children: ReactElement<*>,
	};
	
	export type Theme = {
	  borderRadius: number,
	  colors: { [key: string]: string },
	  spacing: ThemeSpacing,
	};

menuList

<node_modules/react-select/src/components/Menu.js>

	export const menuListCSS = ({
	  maxHeight,
	  theme: {
	    spacing: { baseUnit },
	  },
	}: MenuListComponentProps) => ({
	  maxHeight,
	  overflowY: 'auto',
	  paddingBottom: baseUnit,
	  paddingTop: baseUnit,
	  position: 'relative', // required for offset[Height, Top] > keyboard scroll
	  WebkitOverflowScrolling: 'touch',
	});

menuPortal

<node_modules/react-select/src/components/Menu.js>

	export const menuPortalCSS = ({ rect, offset, position }: PortalStyleArgs) => ({
	  left: rect.left,
	  position: position,
	  top: offset,
	  width: rect.width,
	  zIndex: 1,
	});

	type PortalStyleArgs = {
	  offset: number,
	  position: MenuPosition,
	  rect: RectType,
	};

multiValue

<node_modules/react-select/src/components/MultiValue.js>

	export const multiValueCSS = ({
	  theme: { spacing, borderRadius, colors },
	}: MultiValueProps) => ({
	  label: 'multiValue',
	  backgroundColor: colors.neutral10,
	  borderRadius: borderRadius / 2,
	  display: 'flex',
	  margin: spacing.baseUnit / 2,
	  minWidth: 0, // resolves flex/text-overflow bug
	});

multiValueLabel

<node_modules/react-select/src/components/MultiValue.js>

	export const multiValueLabelCSS = ({
	  theme: { borderRadius, colors },
	  cropWithEllipsis,
	}: MultiValueProps) => ({
	  borderRadius: borderRadius / 2,
	  color: colors.neutral80,
	  fontSize: '85%',
	  overflow: 'hidden',
	  padding: 3,
	  paddingLeft: 6,
	  textOverflow: cropWithEllipsis ? 'ellipsis' : null,
	  whiteSpace: 'nowrap',
	});

multiValueRemove

<node_modules/react-select/src/components/MultiValue.js>

	export const multiValueRemoveCSS = ({
	  theme: { spacing, borderRadius, colors },
	  isFocused,
	}: MultiValueProps) => ({
	  alignItems: 'center',
	  borderRadius: borderRadius / 2,
	  backgroundColor: isFocused && colors.dangerLight,
	  display: 'flex',
	  paddingLeft: spacing.baseUnit,
	  paddingRight: spacing.baseUnit,
	  ':hover': {
	    backgroundColor: colors.dangerLight,
	    color: colors.danger,
	  },
	});

noOptionsMessage

<node_modules/react-select/src/components/Menu.js>

	export const noOptionsMessageCSS = noticeCSS;
	
	const noticeCSS = ({
	  theme: {
	    spacing: { baseUnit },
	    colors,
	  },
	}: NoticeProps) => ({
	  color: colors.neutral40,
	  padding: `${baseUnit * 2}px ${baseUnit * 3}px`,
	  textAlign: 'center',
	});

option

<node_modules/react-select/src/components/Option.js>

	export const optionCSS = ({
	  isDisabled,
	  isFocused,
	  isSelected,
	  theme: { spacing, colors },
	}: OptionProps) => ({
	  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),
	  },
	});

placeholder

<node_modules/react-select/src/components/Option.js>

	export const placeholderCSS = ({
	  theme: { spacing, colors },
	}: PlaceholderProps) => ({
	  label: 'placeholder',
	  color: colors.neutral50,
	  marginLeft: spacing.baseUnit / 2,
	  marginRight: spacing.baseUnit / 2,
	  position: 'absolute',
	  top: '50%',
	  transform: 'translateY(-50%)',
	});

singleValue

<node_modules/react-select/src/components/SingleValue.js>

	export const css = ({
	  isDisabled,
	  theme: { spacing, colors },
	}: SingleValueProps) => ({
	  label: 'singleValue',
	  color: isDisabled ? colors.neutral40 : colors.neutral80,
	  marginLeft: spacing.baseUnit / 2,
	  marginRight: spacing.baseUnit / 2,
	  maxWidth: `calc(100% - ${spacing.baseUnit * 2}px)`,
	  overflow: 'hidden',
	  position: 'absolute',
	  textOverflow: 'ellipsis',
	  whiteSpace: 'nowrap',
	  top: '50%',
	  transform: 'translateY(-50%)',
	});

valueContainer

<node_modules/react-select/src/components/containers.js>

	export const valueContainerCSS = ({
	  theme: { spacing },
	}: ValueContainerProps) => ({
	  alignItems: 'center',
	  display: 'flex',
	  flex: 1,
	  flexWrap: 'wrap',
	  padding: `${spacing.baseUnit / 2}px ${spacing.baseUnit * 2}px`,
	  WebkitOverflowScrolling: 'touch',
	  position: 'relative',
	  overflow: 'hidden',
	});