材质UI样式化组件如何应用样式

Question

使用MaterialUI为样式=组件设置样式
LoginTextField中出现以下错误。
我不知道该怎么解决。

错误消息
[ts]输入'{width：number; }'缺少类型'Pick＆Partial <...>，“ label” |中的以下属性。 ... 283更多... | “ width”>'：样式，参考，className，onFocus和另外7个。 [2740]

环境
打字稿，
React.js（Hooks），
材质用户界面，
样式组件，

// 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>;