在react-select中设置禁用选项的样式

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

const options = [
  { value: 'option1', label: 'Option 1', isDisabled: false },
  { value: 'option2', label: 'Option 2', isDisabled: true },
  { value: 'option3', label: 'Option 3', isDisabled: false },
];

const customStyles = {
  option: (provided, state) => ({
    ...provided,
    color: state.isDisabled ? 'gray' : 'black',
    cursor: state.isDisabled ? 'not-allowed' : 'default',
  }),
};

const App = () => {
  return (
    <Select
      options={options}
      getOptionLabel={(option) => option.label}
      getOptionValue={(option) => option.value}
      getOptionProps={(option) => ({
        isDisabled: option.isDisabled,
      })}
      styles={customStyles}
    />
  );
};

export default App;