如何设置 React-Select 样式

Question

我想修改 react-select 的边框。我正在使用道具className，但实际上会创建一个新边框作为包装器。

这是我的代码：

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

结果：

然后我尝试使用 inputClassName 。但是什么也没发生

下面是我使用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

使用inputClassName 的结果：

Answer 1

您可以使用control 键来扩展react-select 组件的边框颜色和框阴影。将提供的样式传播到返回的对象中，您可以在保留现有样式的同时随意扩展它。您可以参考this link 来设置组件的其他样式。

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>