Estoy usando react-select para seleccionar y buscar en una lista. Necesito cambiar el color del texto del texto seleccionado (que es visible en el cuadro de búsqueda) a gris cuando el usuario hace clic en el cuadro de búsqueda y tiene la intención de buscar una nueva opción y dejar que permanezca en negro cuando el usuario hace clic fuera del cuadro. cuadro de búsqueda/ha seleccionado una nueva opción.
Puedo cambiar el color del texto modificando el estilo de singleValue en la propiedad de styles . Pero no puede cambiar el color cuando se selecciona el menú de búsqueda. Probé algunas otras opciones también, pero el color del texto no cambia cuando el menú de búsqueda está en el estado seleccionado.
<Select components={{ DropdownIndicator: () => null, IndicatorSeparator: () => null, }} placeholder="Search Names" onChange={selectName} options={namesList} styles={{ singleValue: (styles, state) => { return { ...styles, color: state.isSelected ? "gray" : "black", }; }, }} />;¿Alguna sugerencia de lo que estoy haciendo mal aquí?
Necesitas usar el apoyo del tema.
<Select defaultValue={flavourOptions[0]} label="Single select" options={flavourOptions} theme={(theme) => ({ ...theme, borderRadius: 0, colors: { ...theme.colors, text: 'orangered', primary25: 'hotpink', primary: 'black', }, })} />Crédito: respuesta original aquí