Типографский компонент

Question

В соответствии с документацией по материалам здесь: https://material -ui.com / components / typography /

Я должен иметь возможность использовать компонент Typography следующим образом:

<Typography variant="h1" component="h1">
  Hello World
</Typography>

Однако, после обновления до nextjs 9, я получаю эту ошибку ввода:

Type 'string' is not assignable to type 'ElementType<HTMLAttributes<HTMLElement>>'

для свойства компонента. Я несколько раз пытался обновить зависимости набора текста, но, похоже, ничего не помогло.

Благодаря предложению Шенона ошибка теперь перешла на:

48:36 Type '"h1"' is not assignable to type 'ElementType<HTMLAttributes<HTMLElement>>'.
    46 |         </Grid>
    47 |         <Grid item>
  > 48 |           <Typography variant="h1" component={'h1' as const}>
       |                                    ^
    49 |             Hello World
    50 |           </Typography>
    51 |         </Grid>

Который до сих пор является блокировщиком. для меня.

Учитывая, что первый пример, который я дал, точно соответствует документации, я не знаю, как продвигаться по предмету.

Answer 1

Использование component={'div' as any} сработало для меня, что касается сокрытия ошибок машинописного текста.

Answer 2

ComponentType - это тип React для Функциональных Компонентов / Компонентов Класса в их неинициализированной форме.

IE. Чтобы удовлетворить то, что принимает "React.ComponentType", вам просто нужно сделать это ...

const test: React.ComponentType<{name: string}> = ({name})  => <div>I AM DIV</div>;
const test1: React.ComponentType<{name: string}> = class extends React.Component<{name: string}> { render() {return <div>I AM DIV TO</div>}};