使用样式化组件对react-select进行样式设置

Question

我试图更改选择箭头的颜色和焦点对准的控件的颜色，但没有成功。有没有人使用样式组件来做到这一点？

Answer 1

这适用于 react-select@v2.*

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

一般的解决方案是确保classNamePrefix使用prop 添加类名，然后使用 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>
} 
`;

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

Answer 3

这适用于react-select@v1.*

在这里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} />