升级到材质 ui 图标 v5 破坏了 react-select答案

【问题标题】：Upgrade to material ui icons v5 broke react-select升级到材质 ui 图标 v5 破坏了 react-select
【发布时间】：2022-01-06 20:59:44
【问题描述】：

我已经从@material-ui/icons 4.11.2 升级到@mui/material 和@mui/icons-material 5.2.3

我意识到材质 UI 并未直接用于 react-select，但据我所知，有一些交互。

从 Material UI Icons v4 升级到 v5 似乎进展顺利。但是随后，我注意到所有的 react-select 下拉菜单都会在控制台中显示此错误（即时空白屏幕）：

TypeError：theme.transitions 未定义 ./node_modules/@mui/material/SvgIcon/SvgIcon.js/SvgIconRoot
46 | display: 'inline-block',
47 | fill: 'currentColor',
48 | flexShrink: 0,
49 | transition: theme.transitions.create('fill', {
   | ^  50 |   duration: theme.transitions.duration.shorter
51 | }),
52 | fontSize: {

我一直在倾注Material UI v4 -> v5 migration guide，已将我们的react 和react-dom 库升级到17.0.2 和react-select 库到5.2.1，但是这个问题仍然存在。

这是我的函数组件，它包装了所有有问题的下拉选择器。

import React, {useState} from 'react';
import Select from 'react-select';
import {useSelector} from "react-redux";
import "./EntityChildDropdownSelector.scss"
import {selectStyles, selectTheme} from "./SelectorStyles";
import SearchIcon from '@mui/icons-material/Search';
import PropTypes from "prop-types";

/**
 EntityChildDropdownSelector for editing one attribute of an entity

 @return {*}
 @typedef EntitiesSelector{Selector} is a Redux selector that can be used to fetch the entities for this selector
 @typedef Entity{{ id:String }} is an entity having an id
 @typedef TextFormattingFunction{function} given an entity, returns it formatted as text
 @typedef ClassName{string} of attribute to edit
 @typedef ActivateFunction{function} to callback when a selection is made
 */
const EntityChildDropdownSelector = function (props) {
  const
    [isOpen, setIsOpen] = useState(false);

  // option object has id and text, must be translated back and forth value <> riek field
  const entities = useSelector(state => props.entitiesSelector(state)),
    options = entities
      .map((o) => ({value: o.id, label: props.format(o)})),
    active = !!props.active ? options.find((o) => (o.value === props.active.id)) : null;

  const
    toggleOpen = () => {
      setIsOpen(!isOpen);
    },
    onSelectChange = option => {
      toggleOpen();
      props.onActivate(option.value);
    };

  options?.length && !active && props.onActivate(options[0].value);

  return (
    <div>
      <Select
        autoFocus
        classNamePrefix="selector"
        options={options}
        value={active}
        backspaceRemovesValue={false}
        components={{DropdownIndicator: SearchIcon, IndicatorSeparator: null}}
        controlShouldRenderValue={false}
        hideSelectedOptions={false}
        isClearable={false}
        menuIsOpen
        onChange={onSelectChange}
        placeholder="Search..."
        styles={selectStyles(200)}
        theme={selectTheme}
        tabSelectsValue={false}/>
    </div>
  );
}

EntityChildDropdownSelector.propTypes = {
  entitiesSelector: PropTypes.func.isRequired,
  format: PropTypes.func,
  className: PropTypes.string,
  active: PropTypes.object,
  onActivate: PropTypes.func.isRequired,
};

export default EntityChildDropdownSelector;

还发布了这个issue to the react-select library。

【问题讨论】：

标签： javascript reactjs material-ui react-select

【解决方案1】：

（这是我在linked GitHub issue 中给出的答案的副本）：

react-select 使用自己的 theme 属性进行简单的样式自定义，这与 muis theme 属性发生冲突。

您应该用一个函数和一个原始DropdownIndicator 的实例包装SearchIcon，以防止道具传播到图标组件上，但也要保留正常功能：

import Select, { components } from "react-select";

const DropdownIndicator = (props) => (<components.DropdownIndicator {...props}>
  <SearchIcon />
</components.DropdownIndicator>);

<Select
  components={{
    DropdownIndicator
  }}
/>

PS：您也可以只使用 <div> 元素作为包装器（使用 props.innerProps 作为道具），但默认的 DropdownIndicator 组件（来自 components）应用基本的容器样式和类名。

【讨论】：