react select removing the border and box shadow

Question

I am trying to override the css of the react select options div, so in the latest react-select v2, we can pass it as styles

 <Select
    styles={{
      option: (provided) => ({
        ...provided,
        backgroundColor: '#fff',
        border: null, // tried border: 'none'
        boxShadow: null, // tried border: 'none'
        outline: 0
      }),
    }}
  />;

i am trying to remove the border, tried with the above snippet but the border and the shadow remains same

also when click on select i need to override the blue color background on the time of click

how can i achieve this

Arpitha Chandrashekara Arpitha Chandrashekara · Accepted Answer · 2020-07-13T11:17:10

If you want to remove the border of the entire options list, then you need to set the style on the menu component and not on the option component.

Also, for overriding the style of the Select input component you need to set the style on control component

You can try doing this -

<Select
  styles={{
    control: (provided, state) => ({
      ...provided,
      boxShadow: "none",
      border: state.isFocused && "none"
    }),
    menu: (provided, state) => ({
      ...provided,
      border: "none",
      boxShadow: "none"
    }),
    option: (provided, state) => ({
       ...provided,
       backgroundColor: state.isFocused && "lightgray",
       color: state.isFocused && "red"
    })
  }}
  ...
/>

Here is the list of components to be used for setting styles in react-select - https://react-select.com/styles#style-object

react select removing the border and box shadow

1 Answers