TextField TS Error with `variant` prop

When passing a conditional statement to the variant prop of the TextField component like this:

<TextField
  variant={isLongTextQuestion ? "outlined" : "standard"}
  ...
/>

I get a typescript error saying:

Types of property 'variant' are incompatible.
      Type '"standard" | "outlined"' is not assignable to type '"outlined"'.
        Type '"standard"' is not assignable to type '"outlined"'.ts(2322)

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

Expected Behavior 🤔

TextField component should allow this statement as it accepts both outlined and standard independently.

Current Behavior 😯

Gives typescript type error

Steps to Reproduce 🕹

Link:

https://codesandbox.io/s/mor0mrooz9

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v3.9.3
React	v16.8.4
Browser
TypeScript
etc.

[TidyIQ]

I figured out a workaround. For anyone else who sees this, try this:

interface MyTextInputProps extends BaseTextFieldProps {
  readonly foo: number;
}

const MyTextInput: FC<MyTextInputProps> = ({ foo, ...props }) => {
  const newLabel = foo.toString();

  /**
   * Hack to make 'props.variant' type safe
   *
   * See: https://github.com/mui-org/material-ui/issues/15697
   */
  const tsProps = (() => {
    let tsVariant;
    switch (variant) {
      case "outlined": {
        tsVariant = { variant: variant as "outlined" };
        break;
      }
      case "filled": {
        tsVariant = { variant: "filled" as "filled" };
        break;
      }
      case "standard":
      default: {
        tsVariant = { variant: "standard" as "standard" };
        break;
      }
    }
    const p = props;
    delete p.variant;
    return { ...p, ...tsVariant };
  })();
  return <TextInput label={newLabel} {...tsProps} />;
}

It’s far from ideal though as the only purpose of this entire function is to fix the props.variant bug.

[ivorobioff]

fuck dat and do this:

<TextField variant={control.textFieldVariant as any} />