我正在尝试将我的项目之一从JavaScript转换为TypeScript，但是遇到了一个我不知道如何解决的问题。 已经尝试更改@ material-ui版本，但没有解决方案。 错误是这样的：
No overload matches this call. Overload 1 of 2, '(props: { component: ElementType<any>; } & Partial<Record<any, boolean | "auto" | 4 | 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>> & { alignContent?: GridContentAlignment; ... 7 more ...; zeroMinWidth?: boolean; } & CommonProps<...> & Pick<...>): Element', gave the following error. Property 'component' is missing in type '{ children: Element; item: true; xs: number; style: { paddingRight: string; }; }' but required in type '{ component: ElementType<any>; }'. Overload 2 of 2, '(props: DefaultComponentProps<GridTypeMap<{}, "div">>): Element', gave the following error.
Type 'Element' is not assignable to type 'boolean | "auto" | 4 | 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12'. Type 'Element' is not assignable to type '12'.
这是引起错误的代码：
import React, { Component } from 'react'
import { Typography, Container, Hidden, createStyles, WithStyles, withStyles } from '@material-ui/core';
import Grid from '@material-ui/core/Grid';
import ResponsiveTiles from 'react-storefront/ResponsiveTiles'
import ProductItem from '../../components/product/ProductItem'
import ShowMore from 'react-storefront/plp/ShowMore'
import Head from 'next/head'
import BackToTop from 'react-storefront/BackToTop'
import { Skeleton } from '@material-ui/lab'
import { Hbox } from 'react-storefront/Box'
import Breadcrumbs from 'react-storefront/Breadcrumbs'
import LoadMask from 'react-storefront/LoadMask'
import useSearchResultsStore from 'react-storefront/plp/useSearchResultsStore'
import Filter from 'react-storefront/plp/Filter'
import SearchResultsProvider from 'react-storefront/plp/SearchResultsProvider'
import ProductOptionSelector from 'react-storefront/option/ProductOptionSelector'
import FilterButton from 'react-storefront/plp/FilterButton'
import SortButton from 'react-storefront/plp/SortButton'
import Fill from 'react-storefront/Fill'
import fetchFromAPI from 'react-storefront/props/fetchFromAPI'
import createLazyProps from 'react-storefront/props/createLazyProps'
const styles = createStyles(theme => ({
sideBar: {
margin: theme.spacing(0, 4, 0, 0),
width: 275,
},
sortButton: {
[theme.breakpoints.down('xs')]: {
flex: 1,
},
},
total: {
marginTop: theme.spacing(1),
},
}))
interface Props extends WithStyles<typeof styles> {
// if any prop needed, will be set here
}
class Category extends Component<Props, any, any> {
private store: any;
private updateStore: any;
constructor(props: Props) {
super(props);
const [store, updateStore] = useSearchResultsStore(this.props);
this.store = store;
this.updateStore = updateStore;
}
static async getInitialProps(ctx) {
return createLazyProps(opts => {
const { res } = opts
if (res) res.setHeader('Cache-Control', 'max-age=99999')
return fetchFromAPI(opts)
});
}
render() {
const { classes } = this.props;
const { loading, pageData } = this.store;
return (
<>
<Breadcrumbs items={!loading && pageData.breadcrumbs} />
<SearchResultsProvider store={this.store} updateStore={this.updateStore}>
<Container maxWidth="lg" style={{ paddingTop: '2px' }}>
<Head>{loading ? null : <title>{pageData.title}</title>}</Head>
<BackToTop />
<Hbox align="flex-start">
<Hidden implementation="css" xsDown>
<div className={classes.sideBar}>
<Hidden xsDown>
<Filter classes={{ root: classes.sideBar }} expandAll submitOnChange />
</Hidden>
</div>
</Hidden>
<Grid container style={{ position: 'relative' }}>
<LoadMask show={store.reloading} transparent align="top" />
<Grid item xs={12}>
{!loading ? (
<Typography component="h1" variant="h6" gutterBottom>
{pageData.name}
</Typography>
) : (
<Skeleton height={32} style={{ marginBottom: '1px' }} />
)}
</Grid>
<Grid item xs={6} style={{ paddingRight: '1px' }}>
<Hidden implementation="css" smUp>
{/* Display a button that opens the filter drawer on mobile screen sizes */}
<FilterButton style={{ width: '100%' }} />
</Hidden>
</Grid>
<Grid item xs={6} style={{ display: 'flex', justifyContent: 'flex-end' }}>
{/* The sort button is automatically responsive. It will show as a dropdown on desktop, and open a drawer on mobile */}
<SortButton className={classes.sortButton} />
</Grid>
<Grid item xs={6}></Grid>
<Grid item xs={12} style={{ display: 'flex', justifyContent: 'flex-end' }}>
{loading ? (
<Skeleton
width={90}
height={14}
style={{ marginBottom: 4 }}
className={classes.total}
/>
) : (
<Typography variant="caption" className={classes.total}>
<span>
{pageData.total} total {pageData.total === 1 ? 'item' : 'items'}
</span>
</Typography>
)}
</Grid>
<Grid item xs={12}>
{!loading ? (
<ResponsiveTiles autoScrollToNewTiles>
{pageData.products.map((product, i) => (
<ProductItem key={product.id} product={product} index={i} />
))}
</ResponsiveTiles>
) : (
<ResponsiveTiles>
{(() => {
const tiles = []
for (let i = 0; i < 10; i++) {
tiles.push(
<div
key={i}
style={{ marginTop: '2px', marginBottom: '2px' }}
>
<Fill height="100%" style={{ marginBottom: '1px' }}>
<Skeleton variant="rect" />
</Fill>
<Skeleton height={26} />
<ProductOptionSelector
skeleton={4}
variant="swatch"
size="small"
optionProps={{
size: 'small',
showLabel: false,
}}
/>
<Skeleton height={18} />
<Skeleton height={24} style={{ marginTop: '5px' }} />
</div>
)
}
return tiles
})()}
</ResponsiveTiles>
)}
</Grid>
<Grid item xs={12}>
{!loading && <ShowMore variant="button" style={{ paddingBottom: 200 }} />}
</Grid>
</Grid>
</Hbox>
</Container>
</SearchResultsProvider>
</>
)
}
}
export default withStyles(styles, { withTheme: true })(Category);
奇怪的是，尽管发生了此错误，但Next.JS仍可以正常编译（正确）并且页面可以正确呈现。 我以为这可能是IDE的错误或eslint只是很怪异，但试图关闭并重新打开VS Code，重新安装了全局eslint，删除了node_modules文件夹并重新安装了依赖项，无济于事