Esta es mi configuración de estilos. Estoy usando tailwindcss también.
export const colourStyles: StylesConfig = { control: (styles, { isFocused }) => ({ ...styles, backgroundColor: 'white', border: '2px solid #E2E2E2', '&:hover': { border: '2px solid #141414', }, borderRadius: '0.5rem', borderBottomLeftRadius: isFocused ? 0 : '', borderBottomRightRadius: isFocused ? 0 : '', boxShadow: '0px 2px 0px rgba(0, 0, 0, 0.04)', }), menu: (styles) => ({ ...styles, height: 345, marginTop: '0px', borderTopLeftRadius: 0, borderTopRightRadius: 0, border: '2px solid #E2E2E2', borderTop: 'none', boxShadow: '0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)', }), option: (styles, { isSelected }) => { return { ...styles, backgroundColor: isSelected ? '#f6f6f6' : 'white', color: isSelected ? '#141414' : '', '&:hover': { backgroundColor: '#f6f6f6', }, paddingBottom: 0, paddingTop: 0, paddingLeft: 16, paddingRight: 16, }; }, input: (styles) => ({ ...styles, }), menuList: (styles) => ({ ...styles, padding: '6px 0px', minHeight: 343, }), placeholder: (styles) => ({ ...styles, fontSize: 14 }), singleValue: (styles) => ({ ...styles }), };este es mi componente seleccionado
const SingleValue = ({ children, ...props }: SingleValueProps) => { return ( <components.SingleValue {...props}> {/* @ts-ignore */} {props?.selectProps?.value?.text ? ( // @ts-ignore <div>{props?.selectProps?.value.text}</div> ) : ( children )} </components.SingleValue> ); }; <Select {...field} blurInputOnSelect options={options} styles={colourStyles} placeholder={placeholder} components={{ IndicatorSeparator: () => null, SingleValue, }} value={options.find((each) => each.value === field.value)} onChange={(newValue: any) => { field.onChange(newValue.value); }} />