Search code examples
reactjsreact-select

react-select how to set transparent color to options?

I have such a style for the select:

export const style = {
  control: (base: any, state: { isFocused: any; }) => ({
    ...base,
    background: "#fff0",
    // match with the menu
    borderRadius: 0,
    // Overwrittes the different states of border
    borderColor: "green",
    // Removes weird border around container
    boxShadow: state.isFocused ? null : null,
    "&:hover": {
      // Overwrittes the different states of border
      borderColor: state.isFocused ? "red" : "blue"
    }
  }),
  option: (styles: any, {isFocused, isSelected}: any) => ({
    ...styles,
    background: isFocused
        ? 'hsla(291, 64%, 42%, 0.5)'
        : isSelected
            ? 'hsla(291, 64%, 42%, 1)'
            : undefined,
    zIndex: 1,
    backgroundColor : "red",

}),
  menu: (base: any) => ({
    ...base,
    // override border radius to match the box
    borderRadius: 0,
    // kill the gap
    marginTop: 0
  }),
  menuList: (base: any) => ({
    ...base,
    // kill the white space on first and last option
    padding: 0
  })
};

it looks like this:

enter image description here

That is, transparency on the 'Select' line works. Now I want to make transparency instead of red color too

backgroundColor : "fff0",

it will look like this:

enter image description here

That is, transparency on the select... line it works , but it's just white here . Why can it be made transparent too?

Solution

  • When you make your options background transparent they become white because they are rendered within the menu component, which has a white background.

    If you want the options to have the same color as where your Select... placeholder is you can either:

    1. set the background color of options that are not selected to that color manually:

    option: (styles: any, {isSelected}: any) => ({
    ...styles,
    backgroundColor : isSelected ? 'pink' : '#<dark color>',
}),

    2. set the background color of the menu to that dark color while none selected options are transparent:

    option: (styles: any, {isSelected}: any) => ({
    ...styles,
    backgroundColor : !isSelected && 'transparent',
}),
menu: (styles: any) => ({
    ...styles,
    backgroundColor : '#<dark color>',
}),

    3. set both of none selected option and menu backgrounds to transparent:

    option: (styles: any, {isSelected}: any) => ({
    ...styles,
    backgroundColor : !isSelected && 'transparent',
}),
menu: (styles: any) => ({
    ...styles,
    backgroundColor : 'transparent',
}),