无论如何禁用删除反应选择中选定选项的“x”？

Question

I'm Working with react-select and I need to disable the option to delete specific selections (hide or delete the x which is in the red square)

I have looking for a prop to do it and I found this:

isClearable={false}

But that option hide this:

In summary I need to hide the x's shown at first image but keep the shown in the second one

Answer 1

you can try this way with know the class name for the x and hide it with CSS

1- open the console in the browser and use the select tools

and then use the class name in CSS as this way

className {

display: none !important;

}

Answer 2

use multiValueRemove as

const selectStyle = {
  multiValueRemove: (style, state) => {
    console.log('multi value remove', state, style);
    return {
      ...style,
      ...(state.data?.isDisabled
        ? {
            visibility: 'hidden',
            width: '4px',
          }
        : {}),
    };
  },

};

return <Select styles={selectStyle} />