How to styling React-Select

Question

I want to modify border on the react-select. I'm using props className but but what happens instead is to create a new border as a wrapper.

this my code:

import React from 'react'
import Select from "react-select"

const InputSelect = (props) => {
  const { options, placeholder } = props
  return (
    <Select
      options={options}
      placeholder={placeholder}
      className="border border-red-500" />
  )
}

export default InputSelect

Result:

And then i try using inputClassName . But nothing happen

below this my code using inputClassName :

import React from 'react'
import Select from "react-select"

const InputSelect = (props) => {
  const { options, placeholder } = props
  return (
    <Select
      options={options}
      placeholder={placeholder}
      inputClassName="border border-red-500"
    />
  )
}

export default InputSelect

Result using inputClassName:

Answer 1

You can use control key to extend the border color and box shadow of react-select component. Spreading the provided styles into your returned object lets you extend it however you like while maintaining existing styles. You can refer this link to style other things of component.

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {hasError: false};
    }
    
    onChange = (value) => {
      this.setState(prevState => ({ hasError: !prevState.hasError }));
    }
    
    render() {
        const {hasError} = this.state;
        const getColor = (isValid) => isValid ? 'gray' : 'red';
        const colourStyles = {
          control: (styles) => ({ 
              ...styles, 
              borderColor: getColor(!hasError), 
              boxShadow: `0 0 0 1px ${getColor(!hasError)}`, 
              ':hover' : { 
                borderColor: getColor(!hasError), 
                boxShadow: `0 0 0 1px ${getColor(!hasError)}`,  
              } 
           })
        };
        return <Select onChange={this.onChange} styles={colourStyles} options={options} />;
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.12.7/babel.min.js"></script>
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<script src="https://unpkg.com/classnames@2.2.6/index.js"></script>
<script src="https://unpkg.com/react-input-autosize@2.2.2/dist/react-input-autosize.js"></script>
<script src="https://unpkg.com/emotion@10.0.27/dist/emotion.umd.min.js"></script>
<script src="https://unpkg.com/react-select@2.4.4/dist/react-select.js"></script>
<div id="root"></div>