使用带有样式组件和 Typescript 的 MUI 样式标记时出错答案

【问题标题】：Error in using Style Tag of MUI with styled-component and Typescript使用带有样式组件和 Typescript 的 MUI 样式标记时出错
【发布时间】：2022-11-08 22:41:13
【问题描述】：

我使用 Styled Component 创建了 SelectType 组件，如下所示：

import Select from '@mui/material/Select';

export const SelectType = styled(Select)`
    width:100%;
    border:2px solid #eaeaef;
    border-radius:8px;
    margin-top:2px;
    /* padding:8px; */
`

然后我按如下方式使用它：

 <SelectType
     value={dataFieldType}
     placeholder="Select Data Field Type"
     onChange={handleSelect}
 >
    <MenuItem value={"address"}>Address</MenuItem>
    <MenuItem value={"number"}>Number</MenuItem>
 </SelectType>

handleSelect 函数如下：

 const handleSelect = (e:SelectChangeEvent) => {
       setDataFieldType(e.target.value as string)
 }

但 onChange 显示此错误：

没有重载匹配此调用。重载 1 of 2, '(props: { input?: ReactElement<any, any> | undefined; label?: ReactNode; slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; .. . 292 更多 ...; 变体？：“填充”| ... 2 更多 ... | undefined; } & { ...; } & { ...; }): ReactElement<...>',给出了以下错误。

如果我直接使用选择来自 MUI，它工作正常但抛出错误选择类型

我该如何解决这个问题？

【问题讨论】：

有同样的问题。你解决了这个问题吗？
我已切换到到达选择。它更加用户友好，并提供了开箱即用的好功能。如果您的应用经常使用下拉菜单，则值得切换到this
检查我的答案。这就是我修复它的方式。

标签： javascript reactjs typescript material-ui styled-components

【解决方案1】：

尝试像这样添加<unknown>：

const handleSelect = (event: SelectChangeEvent<unknown>) => {
    setDataFieldType(event.target.value as string);
  };

希望这可以帮助。

【讨论】：