To styling with different states

[yeungc]

Hello, may I know how to styling for different states? For example if I use a custom component as caret icon, how to set something like rotate(180deg) for it when menu is opened?

Below is what react select do (state.isSelected / state.isDisabled):

const customStyles = {
  option: (provided, state) => ({
    ...provided,
    borderBottom: '1px dotted pink',
    color: state.isSelected ? 'red' : 'blue',
    padding: 20,
  }),
  control: () => ({
    // none of react-select's styles are passed to <Control />
    width: 200,
  }),
  singleValue: (provided, state) => {
    const opacity = state.isDisabled ? 0.5 : 1;
    const transition = 'opacity 300ms';

    return { ...provided, opacity, transition };
  }
}

[based-ghost]

Ahh ya, good catch - never thought about that scenario since I have not used the custom icons personally. But I think it would be pretty straight forward to expand the typings for clearIcon & caretIcon to be ReactNode | ((state: Partial<IndicatorIconsProps>) => ReactNode) - that way a function that returns a JSX.Element could be passed which would then accept a partial of the wrapping component state. The state forwarded to the function would be:

const state = {
    menuOpen,
    isLoading: !!isLoading,
    isInvalid: !!isInvalid,
    isDisabled: !!isDisabled
  };

Although the clearIcon likely would not rely on state, just to be consistent i'll handle it the same - isLoading, isInvalid, isDisabled are all undefined by default, so normalizing to boolean.

[yeungc]

Thank you, and maybe better if it can apply to all other parts? So we can styling without limit of only focusedBorderColor / focusedBgColor.

[based-ghost]

I think eventually I will refactor some of the styling stuff, but in the meantime, a few releases back I added an optional css property to the major element style objects which is typed string | FlattenSimpleInterpolation. You can pass a raw CSS string or use styled-components css utility wrapper around an interpolated CSS string - since it gets tacked on as the last part of the CSS styling it will override any duplicate properties appearing before it. The following DefaultTheme nested objects have this property: select, icon (this is the container element around the icons), control, input, menu, noOptions, multiValue.

[based-ghost]

Ok - changes should now be available in v2.3.3 just published

[yeungc]

Thank you for hard work! Loved it and going to close the issue now.