Is there a better way to type the MUI Chip prop color when the actual value comes from an object? Using any doesn't seem like a good option. Additionally, is keyof typeof CHIP_COLORS the correct approach for typing?
import { Chip, Stack } from "@mui/material";
const DATA = [
{
id: 2,
status: "success"
},
{
id: 3,
status: "finished"
},
{
id: 4,
status: "error"
}
];
const CHIP_COLORS = {
finished: "primary",
error: "error",
success: "success"
};
export default function App() {
return (
<Stack
sx={{gap: 5}}
>
{DATA.map(({ id, status }) => {
return (
<Chip
color={CHIP_COLORS[status as keyof typeof CHIP_COLORS] as any}
/>
);
})}
</Stack>
);
}
Codesandbox: https://codesandbox.io/s/festive-breeze-s4vpfk?file=/src/App.tsx