Max Rozen

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

December 11, 2017 • ☕️ 1 min read

(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.

Discuss on TwitterEdit on GitHub

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

I won't send you spam.

Unsubscribe at any time.

MaxRozen.com

Max Rozen

Personal blog by Max Rozen.

I'm a Software Engineer that runs an automated GraphQL testing service called OnlineOrNot.