How to use Material-Ui Typography component colors with Typescript

Solution for How to use Material-Ui Typography component colors with Typescript
is Given Below:

I am creating a function where I have to return a color to be set in the typography component.

<Typography color={getStatus(c).color}>
  { getStatus(c).status }
</Typography>

Like so:

  const getStatus = (c: MyType):{status: string, color: string} => {
    const errorColor="error";
    const primaryColor="primary";
    const secondaryColor="secondary";

    if (c === ACondition) {
      return { status: 'Draft', color: primaryColor };
    } else if (c === BCondition) {
      return { status: 'Editing', color: primaryColor };
    } else if (c === CCondition) {
      return { status: 'Failed Publish', color: errorColor };
    }

    return { status: 'Published', color: secondaryColor };
  };

But this is yelling:
enter image description here
enter image description here

And this is Typography.d.ts

export interface TypographyTypeMap<P = {}, D extends React.ElementType="span"> {
  props: P & {
    align?: PropTypes.Alignment;
    /**
     * The content of the component.
     */
    children?: React.ReactNode;
    color?:
      | 'initial'
      | 'inherit'
      | 'primary'
      | 'secondary'
      | 'textPrimary'
      | 'textSecondary'
      | 'error';
    display?: 'initial' | 'block' | 'inline';
    gutterBottom?: boolean;
    noWrap?: boolean;
    paragraph?: boolean;
    variant?: Variant | 'inherit';
    variantMapping?: Partial<Record<Variant, string>>;
  };
  defaultComponent: D;
  classKey: TypographyClassKey;
}

What should I do to avoid that error?

The Typography component is expecting a string literal of one of the types specified in its props.color (e.g. initial, primary, secondary). It will not accept the broad string type, because then you could pass it any old string and it would still compile despite not functioning correctly.

You need to explicitly type the return of your getStatus function to match it. This could be done like so:

const getStatus = (c: MyType):{status: string, color: 'error' | 'primary' | 'secondary'}

Or alternatively, you can pull in the prop interface from the library and index it directly:

import { TypographyProps } from "@material-ui/core/Typography";

type TypographyColors = Exclude<TypographyProps["color"], undefined>;

const getStatus = (c: MyType):{status: string, color: TypographyColors}

This might be more useful if you add further colors from the MUI theme at a later point. The TypographyColors type is quite useful to have as a standalone anyway.