Материал UI стилизованные компоненты как применять стиль

Question

Стилизовано с помощью компонентов styled = с использованием MaterialUI
В LoginTextField появляется следующая ошибка.
Я не знаю, как ее решить.

сообщение об ошибке
[ ts] Тип '{ширина: число; } 'отсутствуют следующие свойства типа' Pick & Partial <...>, "label" | ... еще 283 ... | "width"> ': style, ref, className, onFocus и еще 7. [2740]

enviroment
Typescript,
React. js (Hooks),
Material UI,
styled-component,

// styleButton.tsx
import { Button,TextField } from "@material-ui/core";
import styled from "styled-components";

export const LoginTextField = styled(TextField)<{ width: number }>`
  width: ${(props) => props.width};
`

// index.tsx
import React, { FC, useState } from "react";
import styled from "styled-components";
import { LoginTextField } from "../components/styleButton"

export const Login: FC = () => {

return (
<LoginTextField width={600}></ LoginTextField>
)

Answer 1

Попробуйте вместо этого для styleButton.tsx

import { Button, TextField, TextFieldProps } from "@material-ui/core";
import styled from "styled-components";

//type aliases 
type StyledTextFieldProps = TextFieldProps && { width: number };

export const LoginTextField = styled(TextField)`
   width: ${(props: StyledTextFieldProps) => props.width} 
` as React.ComponentType<StyledTextFieldProps>;