Question 248010 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Background color for React-Select

I changed the background on React-Select to gray but it still has some white spots I’d like to remove. Is it possible? enter image description here You can see that there are white borders above and below the options, I’d like to turn them gray.

<Select
    defaultValue = {{label: "Ascending", value: "A", color: "white"}}
    options ={orders}
    onChange={handleOrder}
    styles={selectStyles}
 />

This is the function for styles:

const selectStyles = {
    control: (styles, state) => ({...styles, fontFamily: "myFont",  borderColor: handleBorderColor(state.isSelected, state.isFocused), backgroundColor: "rgb(164, 162, 162)"}),
    label: (styles) =>({...styles, color: "white"}),
    option: (styles, {data, isDisable, isFocused, isSelected}) => {
      return ({...styles, fontFamily: "myFont", color: isFocused ? "black" : "white", backgroundColor: backgroundDifferentOptions(isSelected, isFocused), borderColor: "black"})  
    },
}

This is what I’m using to change the background color:

const backgroundDifferentOptions = (isSelected, isFocused) =>{
    if (isSelected && isFocused) return "#69CBECFF"
    if (!isSelected && isFocused) return "#69CBECFF";
    if (isSelected && !isFocused) return "rgb(164, 162, 162)";
    if (!isSelected && !isFocused) return "rgb(164, 162, 162)";
}

So far I have not been able to find any information about it. If you know how to help me I’d appreciate it.

Tags:

2

Answers


  1. 0

    You can style menuList. Here’s a working DEMO

    menuList: (provided, state) => ({
    ...provided,
    paddingTop: 0,
    paddingBottom: 0
  })
};
    Login or Signup to reply.
  2. 0

    The white spots you’re seeing are likely related to the menu and menuList styles within the react-select component. You should be able to adjust these with the styles prop, similar to how you’re adjusting the other styles.

    Here’s how you can modify the menu and menuList styles to change their background color:

    const selectStyles = {
    control: (styles, state) => ({...styles, fontFamily: "myFont", borderColor: handleBorderColor(state.isSelected, state.isFocused), backgroundColor: "rgb(164, 162, 162)"}),
    label: (styles) =>({...styles, color: "white"}),
    option: (styles, {data, isDisable, isFocused, isSelected}) => {
        return ({...styles, fontFamily: "myFont", color: isFocused ? "black" : "white", backgroundColor: backgroundDifferentOptions(isSelected, isFocused), borderColor: "black"})
    },
    menu: (styles) => ({...styles, backgroundColor: "rgb(164, 162, 162)", borderColor: "black", overflow: 'hidden'}), // Added this
    menuList: (styles) => ({...styles, backgroundColor: "rgb(164, 162, 162)", padding: '0px'}), // Added this
}

    In this code, menu styles the container that the options are rendered in, and menuList styles the container that the list of options are rendered in. By adjusting their backgroundColor values, you should be able to remove the white spots you’re seeing.

    Remember, you may need to adjust the colors and other style values to match your needs. For example, you may want to remove borderColor: "black" if you don’t want a black border around the menu.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search