Max RozenMax Rozen
TwitterArticlesNewsletter

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

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.

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 weekly with an article like this one to help improve the quality of your React apps. Lots of developers like them, and I'd love to hear what you think as well. You can always unsubscribe.

    Join 43 React developers who signed up last week!

    rssTwitterGitHub

    © 2020 Max Rozen. All rights reserved.