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

Max Rozen
@RozenMD
@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)``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)``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.