React-Select confusing color options

May 2, 2023

I am using React-Select library and there are codes like this:

<SortableSelect
            useDragHandle
            axis="xy"
            onSortEnd={onSortEnd}
            distance={4}
            getHelperDimensions={({ node }) => node.getBoundingClientRect()}
            isMulti
            options={selectableData}
            labelKey="username"
            onChange={onChange}
            components={{
                MultiValue: SortableMultiValue,
                MultiValueLabel: SortableMultiValueLabel,
            }}

            className={classOfSelect}

            defaultValue={ selectableData && selectableData.length >= 2
                ? [selectableData[0], selectableData[1]]
                : []}
            closeMenuOnSelect={false}

        />

I have read the official document however It is not well detailed document and couldn’t find anything about it.
How can I change color my component?

Assigning color to my component.

>Solution :

I had the same issue for me . Luckily, I had added a few comments to my code. These are:

<SortableSelect
 theme={(theme) => ({
                ...theme,
                borderRadius: "6px",
                colors: {
                    ...theme.colors,
                    primary25: 'gray', // Selectable options backgroundColor  when hovered
                    primary: 'green', //outer border,close and dropdown icon color when page focused
                    neutral0:"red", //main container backgroundColor
                    neutral20: "red", // outer border,close and dropdown icon color when page reloaded
                    neutral60: "green", //outer border,close and dropdown icon color when elements hovered
                },
            })}
 />