我们在项目中使用了样式化组件,我们想知道是否有一种方法可以具有react-select V2的完整样式化功能。我的意思是肯定可以使用对象来定义样式,但是感觉很不一致,并且会使DX变得更糟。
据我了解,样式化组件通过创建生成的className
并附加到元素来工作。从本质上讲,这意味着我随时需要使用components
prop。更改文字颜色。如果我想避免使用CSS-in-JS对象,则不能使用styles
。正确吗?
答案 0 :(得分:2)
简单地说,如果要使用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;
`;