Max RozenMax Rozen

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

Max Rozen
@RozenMD

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.

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

I send a single email every two weeks with an article like this one, to help you keep track of what's happening in the React ecosystem.

Lots of developers like them, and I'd love to hear what you think as well. You can always unsubscribe.

    Join 1,508 React developers that have signed up so far!