title: material UI styeled components how to apply style
body: <p>Styled with styled = components using MaterialUI<br>
  The following error appears in LoginTextField.<br>
  I don't know how to solve it.</p>
  
  <p><strong>errormessage</strong><br>
  [ts] Type '{ width: number; }' is missing the following properties from type 'Pick &amp; Partial&lt;...>, "label" | ... 283 more ... | "width">': style, ref, className, onFocus, and 7 more. [2740]</p>
  
  <p><strong>enviroment</strong><br>
  Typescript ,<br>
  React.js(Hooks),<br>
  Material UI,<br>
  styled-component,</p>
  
  <pre><code>// styleButton.tsx
  import { Button,TextField } from "@material-ui/core";
  import styled from "styled-components";
  
  export const LoginTextField = styled(TextField)&lt;{ width: number }&gt;`
    width: ${(props) =&gt; props.width};
  `
  </code></pre>
  
  <pre><code>// index.tsx
  import React, { FC, useState } from "react";
  import styled from "styled-components";
  import { LoginTextField } from "../components/styleButton"
  
  export const Login: FC = () =&gt; {
  
  return (
  &lt;LoginTextField width={600}&gt;&lt;/ LoginTextField&gt;
  )
  </code></pre>