样式反应 - 选择样式组件

Question

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

Answer 1

这适用于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 2

这适用于react-select@v2.*

与@bamse答案相同的想法可以应用于react-select的v2。问题在于，在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 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} />