将 react-select@2 与样式组件一起使用？

【问题标题】：Use react-select@2 with styled-components?将 react-select@2 与样式组件一起使用？
【发布时间】：2019-02-05 18:09:12
【问题描述】：

我们在项目中使用 styled-components，我们想知道是否有办法让 react-select V2 具有完整的样式功能。我的意思是当然可以使用对象来定义样式，但感觉相当不一致，并且会使 DX 变得更糟。

据我了解，样式组件通过创建生成的className 并附加到元素来工作。这基本上意味着我必须在任何需要时使用components prop。更改文本颜色。如果我想避免对象 CSS-in-JS，我不能使用 styles。对吗？

【问题讨论】：

【解决方案1】：

简单地说，如果您要使用styled-components 设置样式的组件接受className 属性，则可以使用styled(Component) 语法对其进行样式设置。

我看到react-select 接受className 的每个组件，所以它应该可以正常工作。

例如：

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

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

【讨论】：