Use react-select@2 with styled-components?

0
votes

We are using styled-components in the project and we are wondering if there is a way to have a full styling capability of react-select V2. I mean it's certainly possible to use objects to define styling, but it feels rather inconsistent and makes a bit worse DX.

From my understanding, the styled-components work by creating generated className and attaching to elements. That would essentially mean I would have to use components prop anytime I need to eg. change text color. I cannot use styles if I want to avoid object CSS-in-JS. Is that correct?

1
reactjsstyled-componentsreact-select

1 Answers

1
votes

Simply put, if the component you want to style with styled-components accepts a className property, it can be styled with it using the styled(Component) syntax.

I see react-select accepts className for every component, so it should work fine.

ex:

import Select from 'react-select';
import styled from 'styled-components';

styled(Select)`
    background-color: red;
    font-size: 20px;
`;