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

Question

我们在项目中使用了样式化组件，我们想知道是否有一种方法可以具有react-select V2的完整样式化功能。我的意思是肯定可以使用对象来定义样式，但是感觉很不一致，并且会使DX变得更糟。

据我了解，样式化组件通过创建生成的className并附加到元素来工作。从本质上讲，这意味着我随时需要使用components prop。更改文字颜色。如果我想避免使用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;
`;