How to change color from params with Typescript?

[spencerchang]

I'm sure my params is one of color's string.

EX1:
color="primary" -> ok

EX2:
let colorPrimary:string = "primary"
color={colorPrimary} -> fail

(property) status?: "error" | "secondary" | "default" | "primary" | "success" | "warning" | undefined
Type 'string' is not assignable to type '"error" | "secondary" | "default" | "primary" | "success" | "warning" | undefined'.ts(2322)

[tianenpang]

Hi @spencerchang you need to give helper.color a correct type that matches the Input status color's type.

For example:

import { Input } from '@nextui-org/react';
import type { InputProps, SimpleColors } from '@nextui-org/react';

type Helper = {
  // one of the SimpleColors
  color?: SimpleColors;

  // one of the InputProps['color'] which is SimpleColors
  // color?: InputProps['color'];

  // default, error and undefined only
  // color?: 'default' | 'error';
};

const Index = () => {
  const helper: Helper = { color: 'default' };

  return <Input color={helper.color ?? 'primary'} />;
};