使用样式组件设置 react-select 样式

Question

我正在尝试更改向上选择箭头的颜色和控件在焦点上时的颜色，但没有成功。有没有人使用 styled-components 做到这一点？

Answer 1

这适用于react-select@v2.*

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

一般的解决方案是确保使用 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} />

Answer 2

这适用于 react-select@v3.*

我遇到了同样的问题并这样解决了：

CustomSelect.js文件：

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

export const CustomSelect = styled(ReactSelect)`
  & .Select__indicator Select__dropdown-indicator {
    border-color: transparent transparent red;
  }
`;

TheComponent.js文件：

import React from 'react';
import { CustomSelect } from './CustomSelect';

export function TheComponent () {
  return <div>
           <CustomSelect
             classNamePrefix={'Select'}
             {* props... *}
           />
           Something awesome here...
         </div>
} 
`;

注意TheComponent.js 中的classNamePrefix={'Select'} - 这很重要。

Answer 3

这适用于react-select@v1.*

Here 你可以找到react-select 和styled-components 的样式示例。

要在打开选择时更改插入符号的颜色，您可以使用它

&.Select.is-open > .Select-control .Select-arrow {
  border-color: transparent transparent red;
}

组件看起来像

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

const RedCaretWhenOpened = styled(ReactSelect)`
  &.Select.is-open > .Select-control .Select-arrow {
    border-color: transparent transparent red;
  }
`;

export (props) => <RedCaretWhenOpened {...props} />