Is there a way to style react select while keeping most of the original style?

Question

I am using https://react-select.com/home#getting-started and I am trying to create something as close as possible to this:

The original style of select that I coded (without customStyles function from the select library) gave me something like this:

But as soon as I start adding the styles (customStyles function from the select library) as showed here below:

import { useEffect, useState } from 'react';
// styled components
import styled from 'styled-components';
// icons
import { IoIosArrowDown } from 'react-icons/io';
// select input
import Select from 'react-select';

const ContextItem = ({ text, options }) => {
  const [treeNodeNames, setTreeNodeNames] = useState();

// THIS IS FROM THE LIBRARY
const customStyles = {
  option: (provided, state) => ({
    ...provided,
    // borderBottom: '1px dotted pink',
    color: state.isSelected ? 'white' : 'black',

  }),
  control: () => ({
    // none of react-select's styles are passed to <Control />
    width: 200,
  }),
  singleValue: (provided, state) => {
    const opacity = state.isDisabled ? 0.5 : 1;
    const transition = 'opacity 300ms';

    return { ...provided, opacity, transition };
  },
};
  useEffect(() => {
    if (options) {
      const treeNodes = options.data.findTreeNodesByTree.map((element) => {
        return {value: element.name, label: element.name  };
      });

      setTreeNodeNames(treeNodes);
    }
  }, [options]);

  return (
    <ContextContainer>
      <ContextTitle>
        <p> {text}</p>
      </ContextTitle>
      {treeNodeNames && (
        <SearchInput>
          <Select options={treeNodeNames} styles={customStyles} />
        </SearchInput>
      )}
    </ContextContainer>
  );
};

// STYLES
const ContextContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
`;

const ContextTitle = styled.div`
  display: flex;
  width: 30%;
  align-items: center;
  justify-content: space-between;
`;
const SearchInput = styled.div`
  width: 60%;
  padding: 5px;
  outline: black;
`;

export default ContextItem;

I get something like this:

So the question is: how do I achieve the desired results showed in the first photo using the customStyles from select without destroying everything? is there a way to have the original react-select's style passed to and modify them accordingly. At the end I just need the:

• No border around the select option
• The select option moved to the right
• same color
• But different background on when selected or hovered
• and no changed border color when clicked on the selected input field

I hope makes sense, let me know if the question is not clear:) I appreciate any sort of help and clues.

Answer 1

This react-select component is composed of multiple smaller parts.

You're on the right track to apply custom styles. Here is a list of various parts of react-select that you can customize. The syntax:

const customStyles = {
  option: (provided, state) => ({
    ...provided,
    color: state.isSelected ? 'red' : 'blue',
    // rest of styling
  })
}

For example, if you want to change the text for no options available, you'll style the noOptionsMessage.

Other things to note:

1. To access the pseudo-classes like :hover for the option component, CSS-in-JS uses this syntax: "&:hover": {...}.
2. More details on how to inspect and style a component's pseudostates here.

Here is a codesandbox which has the react-select styled close to your first picture.

Answer 2

You can use styled-components then use the base component as the Select you want then change specific things about it as you wish

Here's another SO thread on the matter

Styled-components docs on the matter https://styled-components.com/docs/advanced#issues-with-specificity