styled-components - 使用样式组件进行样式 react 选择

Question

我试图在焦点对准时更改向上选择箭头的颜色和控件的颜色，但没有成功。有没有人使用样式组件做过这个？

Answer 1

这适用于 react-select@v2.*
与@bamse 答案相同的想法可以应用于 react-select 的 v2。问题在于，在 v2 中，它们删除了预先确定的类名，除非您指定使用 prop classNamePrefix 添加它们。 .他们还改变了类名的一般外观。

一般的解决方案是确保使用 Prop classNamePrefix 添加类名。 ，然后在 ReactSelect 周围使用样式并在其中使用目标类。

import React from 'react';
import ReactSelect from 'react-select';
import styled from 'styled-components';

const ReactSelectElement = styled(ReactSelect)`
  .react-select__indicator react-select__dropdown-indicator {
    border-color: transparent transparent red;
  }
`;

export (props) => <ReactSelectElement classNamePrefix="react-select" {...props} />