Styling react-select with styled-components

styled-components react-select
Kjell Andreas Solberg picture Kjell Andreas Solberg · Feb 20, 2018 · Viewed 8.5k times · Source

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

jjbskir picture jjbskir · Sep 5, 2019

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} />

Related questions

Target another styled component on hover

What is the best way to handle hovers in styled-components. I have a wrapping element that when hovered will reveal a button. I could implement some state on the component and toggle a property on hover but was wondering if …

Read More
conditional rendering in styled components

How can I use conditional rendering in styled-components to set my button class to active using styled-components in React? In css I would do it similarly to this: <button className={this.state.active && 'active'} onClick={ () => this.…

Read More
You should not use Route or withRouter() outside a Router when using react-router 4 and styled-component in react

I'm trying to build my first portfolio website and got stuck in routing using react-router-dom 4.2.2 and styled-components 2.2.3. error message: You should not use Route or withRouter() outside a Router I also try using Link instead of NavLink but got error …

Read More