React Select Themed as Fluent UI

FluentSelect.tsx

import React from "react";
import Select from "react-select";
import { FontIcon } from "office-ui-fabric-react/lib/Icon";
import { Stack, Label } from "@fluentui/react";

const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" },
];

const customStyles = {
  control: (styles: any, state: any) => ({
    ...styles,
    borderRadius: 1,
    borderColor: state.isFocused ? "rgb(0, 120, 212)" : "rgb(96, 94, 92)",
    minHeight: 32,
  }),
  valueContainer: (styles: any) => ({
    ...styles,
    paddingTop: 0,
  }),
  menu: (styles: any) => ({
    ...styles,
    marginTop: 0,
  }),
  menuList: (styles: any) => ({
    ...styles,
    padding: 0,
  }),
};

function FluentSelect() {
  return (
    <Stack.Item>
      <Label>Color</Label>
      <Select
        isMulti
        label="Color"
        placeholder="Color"
        styles={customStyles}
        components={{
          IndicatorSeparator: () => null,
          ClearIndicator: () => null,
          DropdownIndicator: () => (
            <FontIcon
              iconName="ChevronDown"
              style={{ paddingRight: "7px", fontSize: "12px" }}
            />
          ),
        }}
        theme={(theme) => ({
          ...theme,
          colors: {
            ...theme.colors,
            primary25: "#EDEBE9",
          },
        })}
        options={options}
      />
    </Stack.Item>
  );
}

export default FluentSelect;