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

11 December, 2017

(Sorry not sorry, this article contains a lot of link-bombing)

In case you haven’t heard of these two libraries, react-select is one of the most popular select dropdown pickers in Github, and styled-components is one of the most popular CSS-in-JS libraries out there. Another one of these is emotion, which uses the same API as styled-components, which makes it a breeze to swap between the two.

Personally, I prefer emotion as it allows composition between CSS elements, and doing things like having a base component which gets dynamically styled depending on a single text prop provided to it. (but I digress…)

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.


Enjoyed this post? Receive the next one in your inbox!


Previous: Static Blog Time!

Next: How to resolve 'X defined in resolvers, but not in schema' with babel-plugin-inline-import