Max RozenTwitter
AboutNewsletter

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.

Get The Newsletter!

    No spam, ever.

    Unsubscribe at any time.

    WebMentions

    0 ❤️
    0 💬
    No further replies found. Tweet about this post and it will show up here!
    rssTwitterGitHub

    © 2020 Max Rozen. All rights reserved.