Having a hard time getting my head around styling this component.

[karlkras]

Good afternoon.
New to using react-select and am very impressed (so far) with the functionality of it. However I'm trying to figure out how to perform some relatively simple styling processes. Pretty sure once pushed in the correct direction it will click... for example:

• Control width ( I attempted something like this:

    const customStyles = {
        container: () => ({
            width: 400
        })
    }

which sorta worked but screwed up the formatting of the option list.

• Border color - This is for custom validation process. Simply want a red border on failed validation.
• z index - I need to bump it up as other elements on the page beneath the drop down are bleeding through.

any help on how to approach these things would be greatly appreciated.

I've looked through the docs but it's not clear how to best approach this.

[Rall3n]

Hello @karlkras,

what you are doing with your "Control width" example is effectively replacing the whole style for the container element.

If you want to enhance the base styles for the Select component, you have to include the value of the first argument of the styling function in your returned styles, or else the formatting is "screwed up".

E.g. fixed width:

const customStyles = {
  container: (provided) => ({
    ...provided,
    width: 400
  })
}

Your other queries should be performed in the same way, targeting different elements of the Select component:

{
  // custom border color based on state
  // `selectProps` contains all the props set on the `Select` component
  control: (provided, { isFocused, selectProps, theme }) => ({
    ...provided,
    ...(selectProps.hasError && {
      borderColor: theme.colors.danger,
      boxShadow: isFocused && `0 0 0 1px ${theme.colors.danger}`, // `boxShadow` is used to signal focus
      '&:hover': {
        borderColor: theme.colors.danger
      }
    })
  }),
  // Changing `zIndex`
  menu /* or `menutPortal` */: (provided) => ({
    ...provided, zIndex: 100
  })
}