从 react-select 设置 Select 元素的样式

Question

我正在使用 react-select 库中的 select 元素，而在我的项目中，我正在使用 styled-components。 我想问我是否可以在我的 styles.ts 文件中设置它的样式。如果不可能的话，你们能提供一些关于如何做造型的建议吗？？

在 React:FC 中

import Select from 'react-select'

...

const options = [
    { value: 'Income', label: 'Income' },
    { value: 'Expense', label: 'Expense' },
  ]

...

       <Form>
        <InputElement />
        <Select options={options} />
      </Form>

Answer 1

是的，可以提供您自己的自定义样式，react-select 提供了一种基于对象的方法来设置Select 组件的样式。

参考docs

这是一个简单的例子，

const customStyles = {
  option: (provided, state) => ({
    ...provided,
    borderBottom: '1px dotted pink',
    color: state.isSelected ? 'red' : 'blue',
    padding: 20,
  }),
  control: () => ({
    // none of react-select's styles are passed to <Control />
    width: 200,
  }),
  singleValue: (provided, state) => {
    const opacity = state.isDisabled ? 0.5 : 1;
    const transition = 'opacity 300ms';

    return { ...provided, opacity, transition };
  }
}

const App = () => (
    <Select
      styles={customStyles} // pass the customStyles object to the styles prop
      options={...}
    />
);

通过提供给自定义style object 的键，Select 是非常可定制的。

要记住的一点是，每个键都是一个样式函数，其中第一个参数是提供的样式，第二个参数是选择的状态，即isFocused、isSelected。

编辑- 虽然这是使用基于对象的方法提供自定义样式的建议方法。如果你真的想用styled-components 设置Select 组件的样式，这里有一个例子（你必须通过prop 和基于classNames 的样式提供classNamePrefix）

更多关于使用 classNames docs 进行样式设置的详细信息

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

const SelectElement = styled(Select)`
  .react-select-container {
    // custom styles
  }

  .react-select__control {
    // custom styles
  }

  .react-select__indicators {
    // custom styles
  }
`;

const MySelect = (props) => {
  return (
     <SelectElement classNamePrefix="react-select" options={options} {...props}/>
  )
}

Answer 2

是的，你可以这样做

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

const ReactSelectStyled = styled(ReactSelect)`
   // you have to provide custom styles through class names
   // example
   .react-select__option {
      // custom styles
   }
`;

此外，您可以通过 classNamePrefix 向 Select 组件提供前缀来更改类名的前缀（即类名中的“react-select”部分）。