Styling react-select with styled-components

Question

I'm trying to change the color of the select-up-arrow and the color of the control when it's in focus, but without success. Have anyone done this using styled-components?

Answer 1

This applies to react-select@v2.*

The same ideas as @bamse answer can be applied to v2 of react-select. The problem is that in v2 they removed pre-determined class names unless you specify to add them in with the prop classNamePrefix. They also changed what the class names in general look like.

General solution is to make sure to add in the class names with the prop classNamePrefix, then use styled around ReactSelect and target classes within it.

import React from 'react';
import ReactSelect from 'react-select';
import styled from 'styled-components';

const ReactSelectElement = styled(ReactSelect)`
  .react-select__indicator react-select__dropdown-indicator {
    border-color: transparent transparent red;
  }
`;

export (props) => <ReactSelectElement classNamePrefix="react-select" {...props} />

Answer 2

This applies to react-select@v3.*

I had the same problem and solved it like this:

CustomSelect.js file:

import ReactSelect from 'react-select';
import styled from 'styled-components';

export const CustomSelect = styled(ReactSelect)`
  & .Select__indicator Select__dropdown-indicator {
    border-color: transparent transparent red;
  }
`;

TheComponent.js file:

import React from 'react';
import { CustomSelect } from './CustomSelect';

export function TheComponent () {
  return <div>
           <CustomSelect
             classNamePrefix={'Select'}
             {* props... *}
           />
           Something awesome here...
         </div>
} 
`;

Note the classNamePrefix={'Select'} in TheComponent.js - that's important.