[TextField] TextField type definitions raise errors for default usage with styled-components

[lwolle]

Thanks you all contributors for your excellent work on this library. "We" really appreciate your work. Unfortunately, we encountered an issue when using material-ui, with TypeScript and StyledComponents. Nevertheless, this is of course not diminishing our appreciation of your contributions, time and efforts.

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Current Behavior

Steps to Reproduce

Link: https://codesandbox.io/s/7mnr2lwp3q

1. Import TextField from material-ui.
2. Style TextField with styled components.
3. Use StyledTextField in another component.
4. Rather random type errors for allegedly missing, but mandatory properties, arise.

Context

We are using material-ui, TypeScript and StyledComponents wihtin our application. Wrapping the TextField in a wrapper component, like shown in the codesandbox is unfortunately not to realizable. The same procedure is fully functional for usage of the checkbox in agreement with the excellent material-ui docs

Your Environment

Tech	Version
Material-UI	3.2.0
React	16.4.1
StyledComponents	3.3.2
Browser	all
TypeScript	2.9.2

[eps1lon]

There are two issues:

• while #13060 was an elegant solution for basic usage it does not work well with modification. Discriminated unions are good final types but are problematic with e.g. extends, & or |. We will have to revert that change.
• Seems like they are defining a conflicting innerRef. I might be able to submit a fix upstream.

I'm cautioning anyone who is wrapping styled-components that the innerRef is not actually forwarded correctly. This might cause deprecation warnings for anyone using react 16.6 in strict mode. This is as much of a problem with our implementation as with theirs.

Temporary workaround (not applicable to TextField just yet):

```ts import * as React from 'react'; import { render } from 'react-dom'; import styled from 'styled-components'; import Button, { ButtonProps as MuiButtonProps } from '@material-ui/core/Button'; type Omit = Pick>; type ButtonProps = Omit; const StyledButton = styled(Button)` background: red; `; class WrappedButton extends React.Component { render() { return ; } } const App = () => ; render(, document.getElementById('root')); ```

[eps1lon]

Turns out the innerRef API is removed in v4 anyway. The typings for v3 are now located over at DefinitelyTyped and I couldn't reproduce the issue with their tests.

I recommend that you upgrade to styled-components v4 which should not cause these issues. I don't have the time to fix older versions of styled-components. Feel free to open an issue at DefinitelyTyped or even better a PR.

[lwolle]

@eps1lon Thanks for looking into it. We'll update our dependencies and 🤞 !