React-select: Custom Selected Item in Menu Items

[acejusto11]

Hi,
What are the options to customize the selected item in menu item in multiselect like this below?

I am trying to put an icon by putting :after pseudo element on selected style but it is not working:

const menuStyle = (base: CSSProperties, props: ApprovedAny) => {
  console.log('menuStyle', props);
  const defaultStyle = {
    ...base,
    backgroundColor: 'transparent',
    color: 'black !important',
    ':active': {
      backgroundColor: 'transparent',
    },
  };
  const selectedStyle = {
    ...defaultStyle,
    '::after': {
      content: '',
      float: 'right',
      backgroundImage: 'url("../../../../assets/icons/Check_16.svg")',
    },
  };

  return props.isSelected ? selectedStyle : defaultStyle;
};

...
   styles={{
        control: controlStyle,
        container: containerStyle,
        option: menuStyle,
      }}

I also tried using Custom Option by replacing the Option component but it is also not working: (see below)

const Option = (props: ApprovedAny) => {
  return (
    <div>
      {props.innerRef?.isSelected ? (
        <div>I am selected</div>
      ) : (
        <components.Option {...props} />
      )}
    </div>
  );
};

[ebonow]

Greetings @acejusto11 ,

Looks like you are close...

1) In regards to how CSS works, empty content will not render a pseudo element. Try leaving at least a space for the content property. Also if you plan to use a backgroundImage, it might be helpful to set the display type (block, inline-block, flex, ...etc) and dimensions (height and width).

2) Creating a custom option would work as well, but the isSelected property exists on the props and not the innerRef.

Here is a code sandbox demonstrating both behaviors.

Please let me know if this resolves your styling issues and if so please kindly close this issue.

[bladey]

Thanks for the helpful reply @ebonow!

@acejusto11 please let us know if this resolves your issue, if not, please reopen the issue.