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

Question

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

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

Answer 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;
`;

Use react-select@2 with styled-components?