react-select styling issues with style props

Question

I wanted to use react-select and ran into a whole array of issues after I changed the page background color from white to custom. (The issues aren't so evident on the white background as on react-select's github page)

I'm doing the above through styles prop as the className prop wouldn't work properly.

Here is the styles prop.

const colourStyles = {
    control: styles => ({ ...styles, backgroundColor: '#023950', color: 'white', border: 0 }),
    option: (styles) => {
        return {
            backgroundColor: '#023950',
            color: 'white'
        };
    },
    singleValue: styles => ({ ...styles, color: 'white' }),
};

Here is a list of issues and if someone could help out on how to fix them. Please refer to attached image.

1. Notice the gap between the dropdown and the options (when you click on the dropdown to open the options)
   • If you see here, http://jedwatson.github.io/react-select/, there is no gap but you also can't see the source code. Clicking the source link gives a 404.
   • All demos here, https://react-select.com/styles, have this gap problem.
2. There is a white gap (within the options itself) at the top and bottom. This is different from the gap from the dropdown as mentioned in point 1. That gap is transparent showing what's behind. This one is white.
3. A long text resulted in options results in the whole options box having a weird whitespace issue. Is there a way to clip the text and turn it into ellipsis instead of making the options box wider and have horizontal scroll?
4. Related to the above problem. How to turn off horizontal scroll. Want text clipping instead.
5. Regarding the problem with using className prop, the class does get applied. However only to 1 of the topmost divs. It doesn't apply to the children div, which end up staying white in backgroundColor.

react-select-styling-issues

Answer 1

In the following live example you will find the answer to your different points.

The first 4 points you mentioned can be solved by editing the style-in-JS as following:

 const customStyles = {
    control: (base, state) => ({
      ...base,
      background: "#023950",
      // match with the menu
      borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
      // Overwrittes the different states of border
      borderColor: state.isFocused ? "yellow" : "green",
      // Removes weird border around container
      boxShadow: state.isFocused ? null : null,
      "&:hover": {
        // Overwrittes the different states of border
        borderColor: state.isFocused ? "red" : "blue"
      }
    }),
    menu: base => ({
      ...base,
      // override border radius to match the box
      borderRadius: 0,
      // beautify the word cut by adding a dash see https://caniuse.com/#search=hyphens for the compatibility
      hyphens: "auto",
      // kill the gap
      marginTop: 0,
      textAlign: "left",
      // prevent menu to scroll y
      wordWrap: "break-word"
    }),
    menuList: base => ({
      ...base,
      // kill the white space on first and last option
      padding: 0
    })
  };

For the last one, as the select is supposed to be styled through JS using className props will only put a class on the outer container as mentioned here. If you really want you can still prefix the component with classNamePrefix but it won't really help you for styling.