CODEWITHSUNDEEP
javascriptreactjsreact-selectemotion
Slbox
Slbox

Reputation: 13108

How to style the selected item in React-Select when using a custom component?

We're using a custom Emotion component, and the documentation says that the same properties are passed to customer components, but they don't seem to be. isSelected and other properties don't seem to be there either.

const Option = styled.div`
  color: #444;
  font-family: 'Open Sans', 'Arial', Sans-Serif !important;
  font-size: 0.6875rem;
  text-indent: 6px;
  line-height: 1.85;

  &:hover {
    background: #9cbac2;
  }

  ${props => {
    return css`
      background: ${props.isSelected ? 'red' : '#eee'}; // props.isSelected is not defined
    `;
  }}
`;


<Select
  components={{
    Option: ({ children, innerProps, innerRef }) => (
      <Option ref={innerRef} {...innerProps}>
        {children}
      </Option>
    ),
  }}
  styles={reactSelectStyles} // Tried styling Option in the styles object, but that didn't work with a custom component
/>

Upvotes: 0

Views: 1695

Answers (1)

Drew Reese
Drew Reese

Reputation: 202618

isSelected prop is exposed to the Option object, just need to pass it to your Option component.

<Select
  components={{
    Option: ({ children, innerProps, innerRef, ...rest }) => (
      <Option ref={innerRef} {...innerProps} {...rest}> // isSelected passed with `rest`
        {children}
      </Option>
    )
  }}
/>

Edit react-codesandboxer-example

Upvotes: 1

Related Questions