How to style react-select with styled-components or emotion

For customisable dropdowns, react-select is one of the most popular select dropdown pickers in Github.

In terms of CSS-in-JS solutions, styled-components and emotion are often the first options developers consider. They use the same API, which makes it a breeze to swap between the two.

How to use react-select and styled-components together:

import React from "react";
import ReactSelect from "react-select";
import styled from 'styled-components';
const MultiSelect = styled(ReactSelect)`
    &.Select--multi  {
        .Select-value {
            display: inline-flex;
            align-items: center;
        }
    }
    & .Select-placeholder {
        font-size: smaller;
    }
`
export (props) => <MultiSelect multi {...props} />

How to use react-select and emotion together:

import React from "react";
import ReactSelect from "react-select";
import styled from 'emotion';
const MultiSelect = styled(ReactSelect)`
    &.Select--multi  {
        .Select-value {
            display: inline-flex;
            align-items: center;
        }
    }
    & .Select-placeholder {
        font-size: smaller;
    }
`
export (props) => <MultiSelect multi {...props} />

It's really that easy to go between the two libraries.

You can also do the exact same thing with react-dates saving you from having those pesky global.css files several thousand lines long.

How to style react-select with styled-components or emotion

Do you struggle to keep up with best practices in React?