如何使用react-select为选择使用自定义样式的打字稿

debugcn 发表于 Dev

古赛亚尼

我想知道如何使用react-select将类型很好地添加到Select中。

到目前为止，该组件如下所示：

const Select: React.FC<Select> = (
  {defaultValue, onChange, options}: Select) => (
  <ReactSelect
    styles={selectStyles}
    …
  </ReactSelect>

以及的定义selectStyles：

interface HoverProps {
  bowShadow: string
  border: string
}

interface ControlComponentCSSProperties extends CSSProperties {
  '&:hover': HoverProps
}

const selectStyles = {
  control: (
    provided: CSSProperties,
    state: Props<{label: string; value: string}> | Props<Record<string, unknown>>
  ): ControlComponentCSSProperties => ({
    ...provided,
    '&:hover': {
      bowShadow: 'none',
      border: 'none',
    },
    border: 'none',
    borderRadius: input.border.radius,
    borderBottomLeftRadius: state.menuIsOpen ? 0 : input.border.radius,
    borderBottomRightRadius: state.menuIsOpen ? 0 : input.border.radius,
    …

这样可以通过，tsc但是肯定有更简单的方法可以键入该selectStyles对象。

感谢您的帮助，使我朝着更好的方向发展。干杯!

赫斯卡尔附近

就在这里。您还可以键入整个样式对象，从而无需手动键入每个参数。但在此之前，您需要安装@types/react-select

import Select, { StylesConfig } from 'react-select';

const selectStyle: StylesConfig = {
  control: (provided, state) => {
    // provided has CSSProperties type
    // state has ControlProps<{}> type

    // return type is CSSProperties which means this line will throw
    // error if uncommented
    // return false;

    return {
      ...provided,
      ...yourCustomStyle,
    };
  },
}

const Select: React.FC<Select> = (
  {defaultValue, onChange, options}: Select) => (
  <ReactSelect
    styles={selectStyles}
    …
  </ReactSelect>
)

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。