反应中未识别属性的错误:位置，sx

Question

你好，我正面临这个错误，有人知道如何处理吗？错误不是识别反应中的属性：“位置”，“sx”。..............................................................................................................................................................................................................................................................................................................................................................................错误：

ERROR in src/components/TimeLine.tsx:18:13
TS2322: Type '{ children: Element[]; position: string; }' is not assignable to type 'IntrinsicAttributes & TimelineProps'.
  Property 'position' does not exist on type 'IntrinsicAttributes & TimelineProps'.
    16 | export default function CustomizedTimeline(any: any) {       
    17 |        return (
  > 18 |                <Timeline position="alternate">
       |                          ^^^^^^^^
    19 |                        <TimelineItem>
    20 |                                <TimelineOppositeContent      
    21 |                                        sx={{

ERROR in src/components/TimeLine.tsx:21:6
TS2322: Type '{ children: string; sx: { m: string; align: string; variant: string; color: string; }; }' is not assignable to type 'IntrinsicAttributes & TimelineOppositeContentProps'.
  Property 'sx' does not exist on type 'IntrinsicAttributes & TimelineOppositeContentProps'.
    19 |                        <TimelineItem>
    20 |                                <TimelineOppositeContent      
  > 21 |                                        sx={{
       |                                        ^^
    22 |                                                m: 'auto 0',  
    23 |                                                align: 'right',
    24 |                                                variant: 'body2',

以下是组件的“时间线”代码：

import * as React from 'react';
import Timeline from '@material-ui/lab/Timeline';
import TimelineItem from '@material-ui/lab/TimelineItem';
import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
import TimelineConnector from '@material-ui/lab/TimelineConnector';
import TimelineContent from '@material-ui/lab/TimelineContent';
import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
import TimelineDot from '@material-ui/lab/TimelineDot';
import FastfoodIcon from '@mui/icons-material/Fastfood';
import LaptopMacIcon from '@mui/icons-material/LaptopMac';
import HotelIcon from '@mui/icons-material/Hotel';
import RepeatIcon from '@mui/icons-material/Repeat';
import Typography from '@mui/material/Typography';


export default function CustomizedTimeline(any: any) {
    return (
        <Timeline position="alternate">
            <TimelineItem>
                <TimelineOppositeContent
                    sx={{
                        m: 'auto 0',
                        align: 'right',
                        variant: 'body2',
                        color: 'text.secondary',
                    }}
                >
                    8:00 am
                </TimelineOppositeContent>
                <TimelineSeparator>
                    <TimelineConnector />
                    <TimelineDot>
                        <FastfoodIcon />
                    </TimelineDot>
                    <TimelineConnector />
                </TimelineSeparator>
                <TimelineContent sx={{ py: '12px', px: 2 }}>
                    <Typography variant="h6" component="span">
                        Eat
                    </Typography>
                    <Typography>Because you need strength</Typography>
                </TimelineContent>
            </TimelineItem>
            <TimelineItem>
                <TimelineOppositeContent
                    sx={{ m: 'auto 0' }}
                    variant="body2"
                    color="text.secondary"
                >
                    9:00 am
                </TimelineOppositeContent>
                <TimelineSeparator>
                    <TimelineConnector />
                    <TimelineDot color="primary">
                        <LaptopMacIcon />
                    </TimelineDot>
                    <TimelineConnector />
                </TimelineSeparator>
                <TimelineContent sx={{ py: '12px', px: 2 }}>
                    <Typography variant="h6" component="span">
                        Code
                    </Typography>
                    <Typography>Because it&apos;s awesome!</Typography>
                </TimelineContent>
            </TimelineItem>
            <TimelineItem>
                <TimelineSeparator>
                    <TimelineConnector />
                    <TimelineDot color="primary" variant="outlined">
                        <HotelIcon />
                    </TimelineDot>
                    <TimelineConnector sx={{ bgcolor: 'secondary.main' }} />
                </TimelineSeparator>
                <TimelineContent sx={{ py: '12px', px: 2 }}>
                    <Typography variant="h6" component="span">
                        Sleep
                    </Typography>
                    <Typography>Because I need rest</Typography>
                </TimelineContent>
            </TimelineItem>
            <TimelineItem>
                <TimelineSeparator>
                    <TimelineConnector sx={{ bgcolor: 'secondary.main' }} />
                    <TimelineDot color="secondary">
                        <RepeatIcon />
                    </TimelineDot>
                    <TimelineConnector />
                </TimelineSeparator>
                <TimelineContent sx={{ py: '12px', px: 2 }}>
                    <Typography variant="h6" component="span">
                        Repeat
                    </Typography>
                    <Typography>Because this is the life I </Typography>
                </TimelineContent>
            </TimelineItem>
        </Timeline>
    );
}

Answer 1

您是从@material/lab导入的，该包包含组件的v4 (不包含sx或位置道具)。以下是v4的API：https://v4.mui.com/api/timeline/

为了使用sx和位置道具，您需要升级您的实验室包以使用v5。v5组件在一个新的包@mui/lab中，您可以在这里找到安装信息：https://www.npmjs.com/package/@mui/lab