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

Question

Styled with styled = components using MaterialUI
在 LoginTextField 中出现以下错误。
我不知道如何解决它。

errormessage
[ts] 类型'{宽度：数字；}' 缺少来自类型 'Pick & Partial<...>、“label” | 的以下属性 ... 283 更多... | "width">': style, ref, className, onFocus 等 7 个。[2740]

环境
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>
)

标签： reactjstypescriptmaterial-uimaterial-designstyled-components

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