React Select Ultimate Styles

react-select-styles.js

export const defaultStyles = {
  option: (provided, { isSelected, isDisabled, isFocused }) => ({
    ...provided,
    ...fontStyles,
    top: 0,
    color: isSelected ? '#F5F5F5' : '#000',
    padding: '7px 8px',
    backgroundColor: isSelected ? '#000' : isFocused ? '#00000040' : '#F5F5F5',
    '&:last-child': {
      borderRadius: '0 0 5px 5px',
    },
    ':active': {
      backgroundColor: isDisabled ? '#dadada' : isSelected ? '#00000090' : '#00000080',
      fontSize: '12px',
    },
  }),
  control: (provided, { isFocused }) => ({
    ...provided,
    ...fontStyles,
    fontSize: isFocused ? fontStyles.fontFamily : '13px',
    backgroundColor: '#F5F5F5',
    cursor: 'context-menu',
    border: 'none',
    borderRadius: isFocused ? '5px 5px 0 0 ' : '5px',
    boxShadow: 'none',
  }),
  indicatorSeparator: () => {
    /// override to null
    return {};
  },
  menuList: (provided, _) => {
    /// override to null
    return { borderRadius: '0 0 5px 5px' };
  },
  indicatorsContainer: (provided, _) => {
    /// override to null
    return {};
  },
  menu: (provided, _) => ({
    ...provided,
    backgroundColor: '#F5F5F5',
    borderRadius: '0 0 5px 5px',
    marginTop: 0,
    paddingTop: 5,
    boxShadow: 'rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;',
  }),
};

const fontStyles = {
  fontFamily: 'Poppins',
  fontSize: '12px',
  fontWeight: 700,
  textTransform: 'uppercase',
};