更新

Question

我们要为整个应用程序设置一个具有通用样式的基本Select组件。不幸的是，目前需要进行一些细微的调整，除非在基础组件中为其专门准备，否则这些样式将被忽略。这是我想出的，但我认为它很丑陋且容易出错。因此，我想知道是否有更好的方法可能错过了？

如果需要使用基本组件但具有自己的增强样式且需要从父级进行调整的子公共组件，则此方法将特别痛苦。

export interface ISelectControlProps<OptionType = {}>
  extends Props<OptionType> {
  width?: number
  minWidth?: number
}

const composeStyles = (outerStyles: StylesConfig = {}) => ({
  ...outerStyles,
  control: (base, state) => {
    const {
      selectProps: { width, minWidth },
    } = state
    const controlStyles = {
      ...base,
      border: `1px solid ${Colors.greyMiddle}`,
      margin: Spacing.MarginAroundFormComponents,
      width: width !== undefined ? `${width}rem` : '100%',
      minWidth: minWidth !== undefined ? `${minWidth}rem` : '8rem',
    }
    return outerStyles.control
      ? outerStyles.control(controlStyles, state)
      : controlStyles
  },
  menu: (base, state) => {
    const {
      selectProps: { width },
    } = state
    const menuStyles = {
      ...base,
      zIndex: 20,
      color: Colors.black,
      width: width !== undefined ? `${width}rem` : '100%',
    }
    return outerStyles.menu ? outerStyles.menu(menuStyles, state) : menuStyles
  },
})

export class SelectControl<OptionType> extends React.Component<
  ISelectControlProps<OptionType>
> {
  render() {
    return <Select {...this.props} styles={composeStyles(this.props.styles)} />
  }
}

请注意，我从组件本身获取了从父级传递来的所有样式，并将它们用于与我们的基本样式进行合成。

更新

我准备了一个codeandbox示例。它可以工作，但是在使用BaseSelect的情况下，它感觉很难看，并且很难确定如何在其中组装它。请注意，故意显示颜色是丑陋的：）

https://codesandbox.io/s/zk6jpnm613

使用react-select V2正确的组件样式组成

更新

0 个答案: