import * as React from 'react' ; import { MenuItem } from '@mui/material' ; import { OptionProps } from 'react-select' ; import ColoredDot from './ColoredDot' ; const getStyle = ( props ) => ( { fontWeight : props . isSelected ? 500 : 400 , padding : 5 , } ) ; const ColoredOption = ( props ) => ( < MenuItem selected = { props . isFocused } style = { getStyle ( props ) } { ... ( props . innerProps as any ) } dense = { true } > < ColoredDot color = { props . data . value } /> { props . children } < /MenuItem>); interface ColoredOptionProps extends OptionProps < any , true , any > { data : ColoredSelectOption ; } interface ColoredSelectOption { label : string ; value : string ; } export default ColoredOption ;